Componentes
Campo com unidade ou ação
Unidade, símbolo monetário ou botão dentro do mesmo contorno do campo: parecem um elemento só.
Quando usar
- unidade depois do número ("min")
- "H$" antes do valor
- ação imediata: buscar, adicionar um link
Quando não usar
- dois campos no mesmo grupo
- rótulo dentro do grupo
- ação acoplada num formulário de vários campos
Exemplos
claro
H$
escuro
H$
<div class="hx-form">
<div class="hx-field hx-field-sm"><label class="hx-label" for="vh">Valor-hora</label><div class="hx-input-group"><span class="hx-addon hx-addon-symbol">H$</span><input class="hx-input" id="vh" type="number" step="0.01" value="79.12"></div></div>
<div class="hx-field"><label class="hx-label" for="busca">Buscar solicitações</label><div class="hx-input-group"><input class="hx-input" id="busca" type="search" placeholder="Ex.: Aurora, etapa 5"><button class="hx-button hx-button-primary" type="submit"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-search"></use></svg>Buscar</button></div></div>
<div class="hx-field"><label class="hx-label" for="link">Link do anexo</label><div class="hx-input-group"><input class="hx-input" id="link" type="url" placeholder="https://"><button class="hx-button" type="button">Adicionar</button></div></div>
</div>Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-input-group | o contorno comum; foco em volta do conjunto |
.hx-addon | unidade: 14 px, apagada, à direita |
.hx-addon-symbol | símbolo monetário: 16 px, à esquerda |
.hx-button dentro do grupo | ação: trecho sem contorno próprio |
Origem: cap. 04 §3.5 · ADR-0009 item 10, ADR-0030 · desde a versão 0.1.0