Checkbox
Une case à cocher : oui ou non pour une chose, ou plusieurs choix dans un groupe.
Sur cette page
Playground
État
Fond
<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
<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
Faire et ne pas faire
Do
Cadre et texte cliquables ensemble, avec le coche en encre.
Don’t
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. |