Easy Solutions - Composants / Checkbox

États

Tous les états possibles d'une checkbox. Le label, l'erreur et l'aide sont gérés par <twig:Field> et ses sous-composants.

<twig:Field> <twig:Field:Label> <twig:Checkbox name="cgu" /> J'accepte les CGU </twig:Field:Label> </twig:Field>   <twig:Field> <twig:Field:Label> <twig:Checkbox name="cgu" checked /> Option cochée </twig:Field:Label> </twig:Field>   <twig:Field data-disabled="true"> <twig:Field:Label> <twig:Checkbox name="arc" disabled /> Désactivée </twig:Field:Label> </twig:Field>   <twig:Field data-invalid="true"> <twig:Field:Label> <twig:Checkbox name="cgu" aria-invalid /> En erreur </twig:Field:Label> <twig:Field:Error>Message d'erreur</twig:Field:Error> </twig:Field>

Avec helper

Le sous-composant <twig:Field:Description> ajoute un texte d'aide sous le label. Remplacé par <twig:Field:Error> si présent.

<twig:Field> <twig:Field:Label> <twig:Checkbox name="newsletter" /> Recevoir la newsletter </twig:Field:Label> <twig:Field:Description>Un email par semaine</twig:Field:Description> </twig:Field>

API du composant

Le composant <twig:Checkbox> ne gère plus le label, l'erreur ou l'aide. Enveloppez-le dans <twig:Field> avec <twig:Field:Label>, <twig:Field:Error> et <twig:Field:Description>.

`<twig:Checkbox>`

Attribut HTML	Type	Description
`name`	string	Attribut HTML `name` de l'input.
`value`	string	Valeur soumise quand cochée. Défaut `'1'`.
`checked`	bool	État coché initial.
`disabled`	bool	Désactive l'interaction.
`aria-invalid`	bool	Passe la bordure en rouge. À combiner avec `twig:Field:Error`.

`<twig:Field>`

Attribut	Type	Valeurs	Description
`data-disabled`	bool	`"true"`	Diminue l'opacité du label.
`data-invalid`	bool	`"true"`	Passe le texte du groupe en rouge (destructive).

Sous-composants

Composant	Rôle
`twig:Field:Label`	Label cliquable qui contient le `twig:Checkbox` + le texte.
`twig:Field:Description`	Message d'aide affiché sous le label.
`twig:Field:Error`	Message d'erreur. Remplacé par `Description` si les deux sont présents.

Do & Don't

Toujours associer un label visible à chaque checkbox
Utiliser indeterminate pour un état "sélectionner tout" partiellement coché
Grouper les checkboxes liées dans un fieldset avec un legend
Afficher un Field:Error explicite si la checkbox est requise
Utiliser Field:Description pour expliquer pourquoi une checkbox est désactivée

Ne jamais masquer le label. Il doit toujours exister pour les lecteurs d'écran
Ne pas utiliser une checkbox pour une action immédiate. Utiliser un Toggle
Ne pas dépasser 6-7 checkboxes sans sous-grouper avec un fieldset
Ne pas désactiver une checkbox sans expliquer pourquoi
Ne jamais utiliser display: none sur l'input natif, masquer visuellement uniquement

Règles

Règle

Checkbox = choix multiple dans un formulaire. Pour une action immédiate, utiliser Toggle. Pour un choix unique, utiliser Radio.

Règle

Focus toujours visible sur l'élément custom, jamais supprimé. Obligatoire pour la navigation clavier.

Règle

aria-invalid sur Checkbox + Field:Error obligatoires sur les états error.