Input

Campo de texto acessível com rótulo, erro e estados desabilitados.

Demonstração

Por favor, insira um endereço de e-mail válido.

Props

PropTipoPadrãoDescrição
labelstringTexto do rótulo visível renderizado acima do input.
errorstringMensagem de erro exibida abaixo do input.
helperTextstringTexto auxiliar exibido abaixo do input.
disabledbooleanfalseDesabilita o input.
placeholderstringTexto de placeholder exibido quando o input está vazio.
idstringAtributo id HTML, usado para vincular o rótulo ao input.

Uso

import { Input } from '@ghiberti85/ui'

// Default
<Input label="Email" id="email" placeholder="you@example.com" />

// With error
<Input
  label="Email"
  id="email-error"
  placeholder="you@example.com"
  error="Please enter a valid email address."
/>

// Disabled
<Input label="Email (disabled)" placeholder="you@example.com" disabled />

Ver no Storybook

Abrir no Storybook
Ghiberti UI — Design System