# Checkbox

Une case à cocher : oui ou non pour une chose, ou plusieurs choix dans un groupe.

## Playground

```html
<label class="feitio-choice"><input type="checkbox">Prévenir sur Discord</label>
```

## Quand l'utiliser

-   Pour ne rien sélectionner, une ou plusieurs options provenant d'une liste.
-   Seul, pour accepter quelque chose.

## Quand ne pas l'utiliser

-   **Options mutuellement exclusives :** Radios.
-   **Activer et désactiver un paramètre :** Switch.

## Exemples

### Un groupe

Titre et indice ensemble (`space-1`), les options juste en dessous (`space-3`), et `space-2` entre les options. Le trait de coche est en noir : l'orange reste pour l'action principale.

Afficher le code

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

## États

Non cochée

Notify a day before

Cochée

Notify a day before

Erreur de groupe

Aviser par

DiscordE-mail

Pick at least one

Désactivé

WhatsApp (soon)

## Faire et ne pas faire

Do

Notify a day beforeNotify an hour before

Cadre et texte cliquables ensemble, avec le coche en encre.

Don’t

Notify a day beforeNotify an hour before

Les coches oranges concurrencent le bouton sauvegarder pour l'orange.

## Accessibilité

-   Tout le texte est cliquable, pas juste la boîte.
-   Dans un groupe, le Fieldset donne le titre ; l'erreur du groupe apparaît une seule fois, sous les options.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-choices"`

autour des options

`space-2` entre les options.

`class="feitio-choice"`

sur la `<label>`

Cadre et texte cliquables ensemble.

`checked`, `disabled`

—

Coché ; désactivé.

`aria-invalid="true"`

sur le fieldset

Erreur de groupe, en dessous des options.