FormField
O esqueleto de todo campo — rótulo, obrigatório, texto de ajuda e erro. Tudo que é input vive dentro dele.
Componente base do Nuxt UI (
UFormField), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.O FormField é a moldura de qualquer campo de formulário: rótulo, marca de obrigatório, texto de ajuda e mensagem de erro. Não é o input em si — é o que dá contexto e acessibilidade a ele. Todo campo do ME (Input, Select, Textarea…) vive dentro de um FormField.
Variantes
| Quero… | Use |
|---|---|
| Marcar como obrigatório | required (mostra * no rótulo) |
| Texto de ajuda sob o campo | hint / description |
| Mensagem de erro | error (string) — pinta a borda e anuncia |
| Ajustar densidade | size (sm em formulários densos) |
Obrigatório × opcional — marque só um lado. Se a maioria dos campos é obrigatória, marque os opcionais com "(opcional)" no rótulo; se a maioria é opcional, marque os obrigatórios com
*. Nunca marque os dois ao mesmo tempo — polui e confunde.Estados
| Estado | Comportamento |
|---|---|
| Default | Rótulo + controle + ajuda opcional. |
required | * no rótulo; validação exige preenchimento. |
| Erro | Ícone + mensagem + borda de erro (nunca só a cor); substitui a ajuda enquanto ativa. |
disabled | Campo inteiro inerte (rótulo esmaecido). |
No código
UFormField — doc técnica em ui.nuxt.com/docs/components/form-field.
Acessibilidade
O rótulo é associado ao controle (for/id) — clicar nele foca o campo. O erro é reforçado por ícone + texto (não só cor) e anunciado (aria-describedby + aria-invalid). "Obrigatório" precisa de reforço além do * (ex.: aria-required). Ao submeter com erro, foque e anuncie o primeiro campo inválido.