Composants

Checkbox

La case à cocher. Enrobe le CheckboxInput d'Astryx, avec support de l'état isIndeterminate pour les cases parentes et d'une description sous le libellé.

import { Checkbox } from "@forme-ch/ui/controls";

const [agree, setAgree] = useState(false);

<Checkbox
  isSelected={agree}
  onChange={setAgree}
  description="Obligatoire pour finaliser la commande."
>
  J'accepte les conditions générales
</Checkbox>

État indéterminé

isIndeterminate représente une case parente dont seule une partie des enfants est cochée. C'est un état purement visuel : la valeur reste pilotée par isSelected.

<Checkbox
  isSelected={all}
  isIndeterminate={!all && !none}
  onChange={(v) => setItems([v, v, v])}
>
  Tout sélectionner
</Checkbox>

États

<Checkbox defaultSelected>Cochée par défaut</Checkbox>
<Checkbox isDisabled>Désactivée</Checkbox>
<Checkbox label="Libellé explicite" description="La prop label prime sur children." />

Props

Prop	Type	Défaut	Description
`children`	`ReactNode`	—	Libellé (voie RAC). Ignoré si `label` est fourni.
`label`	`string`	—	Libellé explicite, prioritaire sur `children`.
`description`	`string`	—	Texte descriptif sous le libellé.
`isSelected`	`boolean`	—	Mode contrôlé (coché/décoché).
`defaultSelected`	`boolean`	—	Mode non-contrôlé (état initial).
`isIndeterminate`	`boolean`	—	État indéterminé (case parent partiellement cochée).
`onChange`	`(isSelected: boolean) => void`	—	Callback au changement.
`isDisabled`	`boolean`	—	Désactive la case.
`name`	`string`	—	Nom du champ dans un `<form>` (mappé sur `htmlName`).
`value`	`string`	—	Valeur transmise dans un `<form>`.
`aria-label`	`string`	—	Nom accessible si aucun libellé visible.
`isLabelHidden`	`boolean`	—	Masque le libellé visuel (garde l'a11y).

Accepte aussi className et style.

Accessibilité

Le libellé provient de label, sinon de children, sinon de aria-label (repli littéral « Case »). Fournis toujours un texte : une case sans nom n'est pas conforme. isIndeterminate est exposé aux technologies d'assistance comme état « mixte ».

Do & Don't

✓ À faire

Un libellé cliquable sur chaque case. isIndeterminate pour les cases « tout sélectionner ».

✕ À éviter

Une case seule pour un réglage on/off — préférer Switch. Un groupe de cases exclusives — préférer RadioGroup.