Checkbox

Candidate

Checkbox permet de selectionner zero, une ou plusieurs options independantes. Pour une action on/off immediate, utiliser Toggle. Pour un choix exclusif, utiliser Radio.

Variants

Inclure les segments archives Partager avec les equipes produit Les membres autorises pourront reutiliser ce segment. Toutes les destinations Deux destinations sur quatre sont selectionnees. Accepter les conditions Ce consentement est requis pour continuer. Option indisponible

Variant	Role
Default	Option disponible et non selectionnee
Checked	Option selectionnee
Indeterminate	Selection partielle d’un groupe parent
Error	Validation requise ou incoherente
Disabled	Option visible mais indisponible

Size

La V1 utilise une seule taille de controle. Le libelle et la description suivent les styles typographiques label-md et body-sm. La dimension exacte reste a confirmer dans Figma.

States

default affiche une surface neutre et une bordure structurelle.
hover renforce la bordure lorsque le controle est disponible.
focus-visible ajoute un outline sans modifier la mise en page.
checked et indeterminate utilisent une surface selectionnee et un symbole visible.
disabled conserve le contexte mais bloque l’interaction native.

Astro

---
import Checkbox from '../components/ui/Checkbox.astro';
---

<Checkbox
  label="Inclure les segments archives"
  name="include-archived"
  description="Ces segments resteront identifies comme archives."
/>

HTML output

<label class="pixel-checkbox">
  <input type="checkbox" name="include-archived" />
  <span class="pixel-checkbox__control" aria-hidden="true"></span>
  <span class="pixel-checkbox__content">
    <span class="pixel-checkbox__label">Inclure les segments archives</span>
  </span>
</label>

Tokens

--checkbox-background-*, --checkbox-border-*, --checkbox-icon-selected, --checkbox-focus-ring, --checkbox-label, --checkbox-description, --checkbox-error, --checkbox-size, --checkbox-radius, --checkbox-gap, --checkbox-disabled-opacity.

Do / Don’t

Do	Don’t
Utiliser Checkbox pour des options independantes.	Utiliser plusieurs Checkboxes pour un choix exclusif.
Afficher un libelle explicite et cliquable.	Afficher une case seule sans nom accessible.
Utiliser indeterminate pour resumer un groupe partiel.	Utiliser indeterminate comme troisieme valeur metier.
Expliquer comment corriger une erreur.	Signaler une erreur uniquement par la couleur.

Accessibility

Le composant rend un input type="checkbox" natif, activable avec Space. L’etat partiel combine la propriete DOM indeterminate et aria-checked="mixed". Le focus reste visible et le libelle entier constitue la zone d’activation.