Composants

Switch

L'interrupteur on/off. Enrobe le Switch d'Astryx. À réserver aux réglages qui s'appliquent immédiatement (préférence, activation d'une option) — pour une sélection soumise dans un formulaire, préférer Checkbox.

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

const [on, setOn] = useState(true);

<Switch isSelected={on} onChange={setOn}>
  Notifications par e-mail
</Switch>

États

<Switch defaultSelected>Activé par défaut</Switch>
<Switch>Désactivé</Switch>
<Switch isDisabled>Désactivé (disabled)</Switch>
<Switch isDisabled defaultSelected>Activé (disabled)</Switch>

Props

Prop	Type	Défaut	Description
`children`	`ReactNode`	—	Libellé (voie RAC).
`isSelected`	`boolean`	—	Mode contrôlé (activé/désactivé).
`defaultSelected`	`boolean`	—	Mode non-contrôlé (état initial).
`onChange`	`(isSelected: boolean) => void`	—	Callback au basculement.
`isDisabled`	`boolean`	—	Désactive l'interrupteur.
`name`	`string`	—	Nom du champ dans un `<form>` (mappé sur `htmlName`).
`aria-label`	`string`	—	Nom accessible si aucun libellé visible (repli littéral « Interrupteur »).
`isLabelHidden`	`boolean`	—	Masque le libellé visuel (garde l'a11y).

Accepte aussi className et style.

Accessibilité

Le nom accessible vient de children, sinon de aria-label (repli littéral « Interrupteur »). Si tu fournis un aria-label sans children, le libellé est automatiquement masqué. L'interrupteur expose l'état checked aux lecteurs d'écran et se bascule à la barre d'espace.

Do & Don't

✓ À faire

Utiliser un Switch pour un réglage à effet immédiat. Un libellé décrivant l'état activé.

✕ À éviter

Un Switch pour un choix qui n'est appliqué qu'à la validation d'un formulaire — préférer Checkbox.