Componentes
Escolhas
Grupo de botões para 2–4 opções curtas; select para 5 ou mais; caixa para sim/não com o envio; interruptor para o que vale na hora.
Grupo de botões
claro
escuro
<fieldset class="hx-field">
<legend class="hx-label">Tipo</legend>
<div class="hx-segmented">
<input class="hx-segmented-input" type="radio" name="tipo" id="tipoa" checked>
<label class="hx-segmented-option" for="tipoa"><svg class="hx-icon hx-icon-sm" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-check"></use></svg>Chamada</label>
<input class="hx-segmented-input" type="radio" name="tipo" id="tipob">
<label class="hx-segmented-option" for="tipob"><svg class="hx-icon hx-icon-sm" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-check"></use></svg>Trabalho interno</label>
</div>
</fieldset>Select, caixa e interruptor
claro
escuro
<div class="hx-form">
<div class="hx-field hx-field-md"><label class="hx-label" for="cli">Cliente</label><select class="hx-input" id="cli"><option>Construtora Aurora</option><option>Mercado Bom Preço</option></select></div>
<div class="hx-check"><input class="hx-check-input" type="checkbox" id="avisar" checked><label for="avisar">Avisar o cliente por e-mail</label></div>
<div class="hx-check"><input class="hx-switch" type="checkbox" role="switch" id="notif" checked><label for="notif">Notificações por e-mail</label></div>
</div>Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-segmented, -input, -option | grupo de botões (rádios) |
select.hx-input | lista; seta desenhada em CSS |
.hx-check, .hx-check-input | caixa de seleção |
.hx-switch + role="switch" | interruptor |
Origem: cap. 04 §3.3 · ADR-0009 item 8 · desde a versão 0.1.0