P3 · Padrões

Form Pattern

Padrão de campo composto: rótulo, indicador de obrigatoriedade, hint, erro em linha, atributos ARIA. Aplicado em todos os formulários — incidente, contato, cadastro, edição.

Estrutura canônica

<div class="field">
  <label for="title" class="field-label">
    Título do drop
    <span class="required" aria-hidden="true">*</span>
  </label>
  <input id="title" type="text" required
    aria-required="true"
    aria-describedby="title-hint title-error"
    aria-invalid="true" />
  <p id="title-hint" class="field-hint">
    Máximo 60 caracteres.
  </p>
  <p id="title-error" class="field-error">
    Campo obrigatório.
  </p>
</div>

Campos típicos

Campo	Tipo	Validação
Identificador (ID)	Text com prefixo	Formato controlado, ex: 'DROP-042'.
Severidade / Categoria	Select	Low / Medium / High / Critical.
Descrição	Textarea	Mínimo 30 caracteres.
Responsável	Select com busca	Lista de membros ativos.
Data / hora	Datepicker	Não aceita data passada.

Acessibilidade e validação

Clique no rótulo foca o controle.
Asterisco visível em --sem-danger no rótulo.
Atributos required e aria-required='true' no input.
Erro anunciado via aria-invalid='true' + mensagem visível abaixo.
Foco com outline 3px --accent-base, offset 2px.
Validação no blur (sair do campo) e no submit, nunca no keypress.

Diretrizes

Faça

Hint sempre acima do erro — quando há erro, hint pode ficar oculto.
Mensagens de erro descrevem o problema, não a regra ('Email inválido' melhor que 'Inválido').
Agrupe campos relacionados com <fieldset> + <legend>.

Não faça

Não use placeholder como label — invisível para leitor de tela.
Não esconda erros até o submit — feedback inline economiza tempo.
Não use cor como único sinal de erro — texto + ícone + ARIA.