Composant · Formulaire

Checkbox

Stable

Case à cocher pour un choix binaire indépendant ou une sélection multiple dans une liste. Case <input type="checkbox"> native, stylée par accent-color, avec libellé requis et texte d'aide optionnel.

Quand l'utiliser

Activer/désactiver une option indépendante (consentement, préférence).
Sélectionner plusieurs éléments dans une liste où les choix ne s'excluent pas.
Pour des choix exclusifs, utilisez Radio ; pour un réglage instantané, Toggle/Switch.

États

Défaut (décoché)

Activer les modèles d'espace

Coché

Activer les modèles d'espace

Avec texte d'aide

Recevoir les e-mails produit Vous pourrez vous désabonner à tout moment.

Désactivé

Verrouillé par la politique Verrouillé (coché)

Erreur

Accepter les conditions Vous devez accepter pour continuer.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>Défaut (décoché)</h3>
  <Checkbox label="Activer les modèles d'espace" />
  <h3>Coché</h3>
  <Checkbox label="Activer les modèles d'espace" checked />
  <h3>Avec texte d'aide</h3>
  <Checkbox
    label="Recevoir les e-mails produit"
    helperText="Vous pourrez vous désabonner à tout moment."
  />
  <h3>Désactivé</h3>
  <Checkbox label="Verrouillé par la politique" disabled />
  <Checkbox label="Verrouillé (coché)" checked disabled />
  <h3>Erreur</h3>
  <Checkbox
    label="Accepter les conditions"
    invalid
    helperText="Vous devez accepter pour continuer."
  />
</div>

Anatomie

Élément racine : un <label> englobant (classe st-choice).
Case (.st-choice__input) : <input type="checkbox"> native, couleur via accent-color.
Contenu : libellé (requis) + texte d'aide optionnel.

Accessibilité

Case native : focusable au clavier, basculée avec Espace.
Le libellé englobe l'input : cliquer le texte coche la case.
aria-invalid="true" est posé en erreur, la couleur d'accent passe au rouge.
Le libellé est obligatoire (prop label) : pas de case sans texte.

Lignes directrices

À faire

Formuler le libellé positivement (« Activer X »).
Grouper les cases liées sous une légende (FormGroup).

À éviter

Employer une case pour un réglage appliqué immédiatement : utilisez Toggle.
Des libellés à la double négation.

API

Prop	Type	Défaut	Description
`label`	`string`	requis	Libellé visible de la case.
`helperText`	`string`	optionnel	Texte d'aide sous le libellé.
`invalid`	`boolean`	`false`	Active l'état erreur (aria-invalid).
`class`	`string`	optionnel	Classe(s) sur le <label>.
Autres attributs	`HTMLInputAttributes`	N/A	Propagés sur l'<input> (checked, disabled, name, onchange…).

Tokens utilisés

--st-component-selection-checkedBackground
--st-component-control-focusRing
--st-component-control-invalidBorder
--st-component-field-labelText
--st-component-field-helpText
--st-component-control-disabledText