Checkbox
Uma caixa de marcar: sim ou não para uma coisa, ou várias escolhas num grupo.
Nesta página
Playground
Estado
Fundo
<label class="feitio-choice"><input type="checkbox">Avisar no Discord</label>Quando usar
- Para escolher nenhuma, uma ou várias opções de uma lista.
- Sozinha, para concordar com algo.
Quando não usar
- Opções que se excluem: Radios.
- Ligar e desligar um ajuste: Switch.
Exemplos
Um grupo
Título e dica juntos (space-1), as opções logo abaixo (space-3), e entre uma opção e outra space-2. A marcação é na cor da tinta: o laranja fica para a ação principal.
Mostrar código
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Avisar por</legend>
<span class="feitio-hint">Marque quantos quiser</span>
<div class="feitio-choices">
<label class="feitio-choice"><input type="checkbox" name="avisar" value="discord" checked>Discord</label>
<label class="feitio-choice"><input type="checkbox" name="avisar" value="email">E-mail</label>
</div>
</fieldset>Estados
Bons e maus padrões
Faça assim
A caixa e o texto clicáveis juntos, e a marcação em tinta.
Não faça
Marcações em laranja disputam o laranja com o botão de salvar.
Acessibilidade
- O texto inteiro é clicável, não só a caixa.
- Num grupo, o Fieldset dá o título; o erro do grupo fica uma vez só, embaixo das opções.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-choices" | em volta das opções | space-2 entre uma opção e outra. |
class="feitio-choice" | no <label> | Caixa e texto clicáveis juntos. |
checked, disabled | — | Marcada; desativada. |
aria-invalid="true" | no fieldset | Erro do grupo, embaixo das opções. |