Padrões
Formulários
Uma coluna, campos nas quatro larguras, o servidor como única voz, e o que fazer quando a ação está dentro de uma lista.
Envio recusado
claro
escuro
<form class="hx-form" novalidate action="#">
<div class="hx-message hx-message-danger hx-error-summary" role="alert" tabindex="-1"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-octagon-alert"></use></svg><div class="hx-message-body"><p class="hx-message-title"><span class="hx-visually-hidden">Erro:</span>Revise 1 campo</p><ul><li><a href="#email">E-mail: informe um e-mail válido, como nome@empresa.com</a></li></ul></div></div>
<div class="hx-field"><label class="hx-label" for="email">E-mail</label><input class="hx-input" id="email" type="email" value="ana@empresa" aria-invalid="true" aria-describedby="email-erro"><p class="hx-error" id="email-erro"><svg class="hx-icon hx-icon-sm" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-octagon-alert"></use></svg>Informe um e-mail válido.</p></div>
<div class="hx-actions"><button class="hx-button hx-button-primary" type="submit">Salvar organização</button><a class="hx-button hx-button-link" href="#">Cancelar</a></div>
</form>Agir dentro de uma lista
| Caso | Como |
|---|---|
| até 2 campos | a linha se expande na largura toda, logo abaixo — nunca dentro de uma célula |
| decisão com consequência | dois passos no mesmo lugar: ações → motivo e "Confirmar recusa" |
| 3 campos ou mais | página ou fragmento próprio, com volta para a lista |
Origem: cap. 04 §3.2, §3.7–§3.8 · ADR-0009, ADR-0010 · desde a versão 0.1.0