Case à cocher
خانة اختيارCheckbox
Stable
src/dsm/components/checkbox.tsxCase à cocher accessible avec libellé et aide intégrés, et son pendant en groupe `CheckboxGroup` pour une sélection multiple derrière une légende commune. L'état indéterminé permet de représenter une sélection partielle d'un groupe.
Import
import { Checkbox } from "@/dsm/components/checkbox";Exemples
Case simple
Case isolée, avec libellé, aide et état indéterminé.
LTR
Groupe
`CheckboxGroup` en colonne et en ligne.
LTR
États
Groupe désactivé et groupe en erreur.
LTR
Usage
Quand l'utiliser
- Utilisez `Checkbox` pour un consentement ou une option binaire indépendante (accepter les conditions, s'abonner à une notification).
- Utilisez `CheckboxGroup` pour une sélection de zéro, un ou plusieurs éléments dans une même liste (documents à joindre, notifications à recevoir).
- Utilisez `indeterminate` pour une case « tout sélectionner » qui reflète un état partiel du groupe qu'elle contrôle.
Quand ne pas l'utiliser
- N'utilisez pas une case à cocher seule pour un choix binaire du type marche/arrêt qui prend effet immédiatement : `Switch` est plus adapté.
- N'utilisez pas `CheckboxGroup` si un seul choix est possible : `RadioGroup` exprime mieux l'exclusivité mutuelle.
Accessibilité & langues
Accessibilité
- Le libellé enveloppe la case (`<label>`), la zone cliquable couvre donc tout le texte, pas seulement la case.
- L'état `indeterminate` est visuel et sémantique : il est exposé aux lecteurs d'écran comme un troisième état, distinct de coché/décoché.
- `CheckboxGroup` s'appuie sur `Fieldset` : la légende native regroupe correctement les options pour les technologies d'assistance.
RTL & multilingue
- La case et le texte utilisent `gap` logique : leur ordre visuel s'inverse automatiquement en arabe sans classe additionnelle.
Propriétés
Checkbox
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| label | ReactNode | — | Libellé affiché à côté de la case. |
| hint | ReactNode | — | Texte secondaire sous le libellé. |
| size | "sm" | "md" | md | Taille de la case. |
| indeterminate | boolean | — | Affiche un tiret plutôt qu'une coche, pour une sélection partielle. |
| checked / defaultChecked / onCheckedChange | boolean | — | Contrôle ou observe l'état coché. |
CheckboxGroup
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| legend* | ReactNode | — | Légende du groupe. |
| hint / error | ReactNode | — | Aide ou message d'erreur du groupe. |
| options* | { value, label, hint?, disabled? }[] | — | Cases proposées. |
| orientation | "row" | "column" | column | Disposition des options. |
| value / defaultValue / onValueChange | string[] | — | Valeurs actuellement cochées. |