# Checkbox

Uma caixa de marcar: sim ou não para uma coisa, ou várias escolhas num grupo.

## Playground

```html
<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

```html
<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

Desmarcada

Avisar um dia antes

Marcada

Avisar um dia antes

Erro no grupo

Avisar por

DiscordE-mail

Escolha pelo menos um

Desativada

WhatsApp (em breve)

## Bons e maus padrões

Faça assim

Avisar um dia antesAvisar uma hora antes

A caixa e o texto clicáveis juntos, e a marcação em tinta.

Não faça

Avisar um dia antesAvisar uma hora antes

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.