C15 · Componentes

Form

Primitivas de entrada: input, textarea, select, checkbox, radio. Foco usa cor de assinatura. Erros espelham a mesma tonalidade do feedback semântico danger.

Tipos de campo

Tipo	Uso
Input + hint	Texto curto com texto auxiliar abaixo.
Input + erro	Validação negativa, mensagem em vermelho.
Textarea	Texto longo (descrição, mensagem).
Select	Lista finita (até 7 opções; mais → autocomplete).
Checkbox	Múltipla seleção, valores não exclusivos.
Radio	Seleção única exclusiva.

Estrutura padrão

<div class="field">
  <label for="name">Nome <span aria-hidden="true">*</span></label>
  <input id="name" type="text" required
    aria-describedby="name-hint" />
  <p id="name-hint" class="hint">Como você gosta de ser chamado.</p>
</div>

Estados

Estado	Visual
default	Borda `--n-fog`.
focus	Borda 2px `--accent-base`, outline 3px wash.
error	Borda `--sem-danger`, mensagem visível.
disabled	Opacidade 0.5, cursor not-allowed.
readonly	Fundo `--n-bone`, sem borda visível.

Acessibilidade

Labels associados via for/id.
Mensagens de erro vinculadas via aria-describedby.
Campos obrigatórios com aria-required='true'.
Estado inválido com aria-invalid='true'.
Asterisco visível + texto auxiliar 'obrigatório'.