Componentes

Campo

Rótulo → campo → erro → dica. Campos lado a lado alinham pelo topo; o erro cresce para baixo sem mover o vizinho.

Quando usar

um controle por tipo de dado
larguras pelo dado: xs, sm, md, lg

Quando não usar

placeholder no lugar do rótulo
balão de validação do navegador
campo para valor que não se edita

Campo com erro e dica

claro

Início

Sobrepõe 09:00–10:00.

Duração

min

Termina às 10:15

escuro

Início

Sobrepõe 09:00–10:00.

Duração

min

Termina às 10:15

html

<div class="hx-field-row">
  <div class="hx-field hx-field-sm">
    <label class="hx-label" for="inicio">Início</label>
    <input class="hx-input" id="inicio" type="time" value="09:30" aria-invalid="true" aria-describedby="inicio-erro">
    <p class="hx-error" id="inicio-erro"><svg class="hx-icon hx-icon-sm" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-octagon-alert"></use></svg>Sobrepõe 09:00–10:00.</p>
  </div>
  <div class="hx-field hx-field-xs">
    <label class="hx-label" for="duracao">Duração</label>
    <div class="hx-input-group"><input class="hx-input" id="duracao" type="number" value="45" step="15" aria-describedby="duracao-dica"><span class="hx-addon">min</span></div>
    <p class="hx-hint" id="duracao-dica">Termina às 10:15</p>
  </div>
</div>

Estados

claro

Nome (opcional)

Conta

Somente leitura

Construtora Aurora

escuro

Nome (opcional)

Conta

Somente leitura

Construtora Aurora

html

<div class="hx-field-row">
  <div class="hx-field hx-field-md"><label class="hx-label" for="nome">Nome <span class="hx-optional">(opcional)</span></label><input class="hx-input" id="nome" type="text" placeholder="Ex.: Ana Souza"></div>
  <div class="hx-field hx-field-md"><label class="hx-label" for="conta">Conta</label><input class="hx-input" id="conta" type="text" value="ana@empresa.com" disabled></div>
  <div class="hx-field hx-field-md"><span class="hx-label">Somente leitura</span><p class="hx-readonly">Construtora Aurora</p></div>
</div>

Marca-se o opcional, não o obrigatório. Desabilitado: tracejado, com a razão por perto. Somente leitura é texto, não campo.

Validação

novalidate em todo formulário: o servidor é a única voz. Envio recusado = resumo no topo (mensagem de perigo com um link por erro, que recebe o foco) e cada erro no seu campo — ver Formulários.

Anatomia

rótulo — 16 px, texto forte, numa linha só
controle — 44 px, 16 px, contorno de 1 px (4,26:1)
erro — 14 px, perigo, com ícone; contorno passa a 2 px
dica — 14 px, apagada; uma prévia calculada é dica

Acessibilidade

aria-describedby liga o campo ao erro e à dica;
aria-invalid="true" no erro;
<label for> sempre; autocomplete e inputmode ficam.

Referência

Classe ou atributo	Para quê
`.hx-form, .hx-form-wide`	formulário de 32 rem (40 com textos longos)
`.hx-field-row`	campos lado a lado, alinhados pelo topo
`.hx-field, -xs/-sm/-md`	campo e largura: 7, 11, 18 rem ou 100%
`.hx-label, .hx-optional, .hx-input, .hx-error, .hx-hint, .hx-readonly`	as partes
`aria-invalid="true", disabled`	estados

Origem: cap. 04 §3.1–§3.2, §3.5 · ADR-0009 · desde a versão 0.1.0

Design system

Aparência