Input

Campo de entrada com label, helper text, ícone, senha e estados de erro e desabilitado.

Default

Variantes de input

Nome completo

Nome como aparece no documento.

Busca

Senha

E-mail

Formato de e-mail inválido.

Campo desabilitado

// Básico — FormField envolve o input e cuida do Label + helper
<FormField
  title="Nome completo"
  htmlFor="name"
  description="Nome como aparece no documento."
>
  <Input id="name" placeholder="Digite seu nome" />
</FormField>

// Com ícone — InputGroup como filho do FormField
<FormField title="Busca" htmlFor="search">
  <InputGroup>
    <InputGroupAddon>
      <IconSearch />
    </InputGroupAddon>
    <InputGroupInput id="search" placeholder="Buscar..." />
  </InputGroup>
</FormField>

// Com erro — `error` substitui a description; o input mantém aria-invalid
<FormField
  title="E-mail"
  htmlFor="email"
  error="Formato de e-mail inválido."
>
  <Input id="email" aria-invalid placeholder="seu@email.com" />
</FormField>

// Desabilitado
<FormField title="Campo desabilitado" htmlFor="disabled">
  <Input id="disabled" disabled placeholder="Indisponível" />
</FormField>