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

<input
  placeholder="Digite seu nome"
  className="flex h-8 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
/>

// Com ícone de busca:
<div className="relative">
  <IconSearch className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
  <input placeholder="Buscar..." className="... pl-9 pr-3" />
</div>

// Com erro:
<input className="... border-destructive focus-visible:ring-destructive" />

// Desabilitado:
<input disabled className="... disabled:cursor-not-allowed disabled:opacity-50" />