Input

O componente está em @zexon/ui/components/input. É um <input> nativo com estilos de Tailwind e tokens semânticos (border-input, focus-visible:ring-ring, etc.).

Uso

Variante HUD

Campo tático com colchetes (variant="hud"). Opcional: hudBracketSize (sm | default).

HUD — estados e tamanhos

Os colchetes usam o preset de campo (focus-within → primário; aria-invalid → destrutivo). A moldura fina replica anel e borda de erro como no Input padrão. Com disabled, o conjunto moldura + campo fica mais apagado e sem anel. readOnly não desativa o controlo: o texto usa cursor-default.

Tipos e largura

Passe type como em HTML (email, password, search, number, …). Use className para limitar largura (max-w-sm, w-full).

Estados e acessibilidade

Use disabled para bloquear. Para erro de validação, defina aria-invalid no controle associado: o estilo de erro é aplicado automaticamente.

Aplicações

Formulário simples