Inputs
Form Fields
Biblioteca completa de campos de formulário e seus estados.
Overview
Demonstração real e interativa de Form Fields nas larguras desktop, tablet e mobile.
Nome completo do responsável
Máximo 500 caracteres
Informe um CNPJ válido
CNPJ validado na Receita Federal
Playground
Altere as propriedades e veja o componente atualizar em tempo real.
Nome completo do responsável
Máximo 500 caracteres
Informe um CNPJ válido
CNPJ validado na Receita Federal
Superfície
Densidade
Largura
Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.
States
Todos os estados exibidos simultaneamente para facilitar a comparação.
Default
Hover
Feedback imediato
Focus
Anel de foco visível
Disabled
opacity 60%
Usage
Critérios de escolha e boas práticas.
When to use
- Coletar dados estruturados do usuário.
- Formulários de cadastro, filtros avançados e configurações.
When not to use
- Ações imediatas sem entrada de dados — use Button.
- Escolhas curtas e exclusivas — use Selection Buttons.
Sempre associe label ao campo e explique erros de forma acionável.
Não use placeholder como substituto do label nem valide antes do blur.
Accessibility
Requisitos obrigatórios para conformidade WCAG 2.1 AA.
- Todo campo possui <label> associado por htmlFor/id.
- Mensagens de erro usam aria-describedby e aria-invalid.
- Campos obrigatórios são indicados textualmente, não apenas por asterisco colorido.
- Read only permanece focável; disabled é removido da tabulação.
Specifications
Valores de referência para implementação, sempre baseados em tokens.
| Propriedade | Valor | Token |
|---|---|---|
| Height | 40px | |
| Padding | 8px 12px | |
| Border | 1px solid | |
| Border Radius | 6px | |
| Typography | 14px / 20px | |
| Placeholder | Text secondary | |
| Error border | 1px solid | |
| Focus | 2px outline |