Field
Label, campo e mensagem. Se houver erro, a dica some.
Quando usar
Qualquer controle de formulário visível. O placeholder não substitui o label.
Do
Label ligado ao campo. Erro no próprio Field.
Don’t
Hint e error juntos, ou validar só com toast.
Anatomia
Label em cima, controle no meio, mensagem embaixo.
Use o corporativo
E-mail inválido
import { Field, Input } from "@sable/ui"
<Field label="E-mail" htmlFor="email" error={msg}>
<Input id="email" type="email" aria-invalid={Boolean(msg)} />
</Field>
Teclado
| Tecla | Ação |
|---|---|
| Tab | Entra no controle |
| Leitor de tela | Lê o erro com role=alert |