Composants

RadioGroup

Le choix exclusif dans une liste. RadioGroup enrobe le RadioList d'Astryx ; chaque option est un <Radio> déclaratif (il ne rend rien seul, il est lu par le groupe et mappé en RadioListItem).

<Radio> est un composant déclaratif : il s'utilise uniquement comme enfant de RadioGroup.

import { RadioGroup, Radio } from "@forme-ch/ui/controls";

const [mode, setMode] = useState("std");

<RadioGroup label="Mode de livraison" value={mode} onChange={setMode}>
  <Radio value="std">Standard</Radio>
  <Radio value="exp" description="Livraison sous 24h, supplément CHF 12.–">Express</Radio>
  <Radio value="retrait" description="Au dépôt de Lausanne">Retrait sur place</Radio>
</RadioGroup>

Groupe désactivé

<RadioGroup label="Groupe désactivé" defaultValue="a" isDisabled>
  <Radio value="a">Option A</Radio>
  <Radio value="b">Option B</Radio>
</RadioGroup>

Props — RadioGroup

Prop	Type	Défaut	Description
`children`	`ReactNode`	—	Les `<Radio>` du groupe.
`value`	`string`	—	Mode contrôlé (valeur sélectionnée).
`defaultValue`	`string`	—	Mode non-contrôlé (sélection initiale).
`onChange`	`(value: string) => void`	—	Callback à la sélection.
`label`	`ReactNode`	—	Libellé visible du groupe.
`ariaLabel`	`string`	—	Nom accessible si aucun `label` visible (repli littéral « Choix »).
`name`	`string`	—	Nom du champ dans un `<form>`.
`isDisabled`	`boolean`	—	Désactive tout le groupe.

Props — Radio

Prop	Type	Défaut	Description
`value` *	`string`	—	Valeur de l'option.
`children`	`ReactNode`	—	Libellé (voie RAC).
`label`	`string`	—	Libellé explicite, prioritaire sur `children`.
`description`	`string`	—	Texte descriptif sous le libellé.

Accessibilité

Le groupe porte un nom accessible via label (visible) ou ariaLabel (repli littéral « Choix »). La navigation clavier entre options (flèches) et la sémantique radiogroup sont gérées nativement par Astryx. Le libellé de chaque option vient de label puis de children.

Do & Don't

✓ À faire

Un label de groupe explicite. Une description pour clarifier une option.

✕ À éviter

Rendre un <Radio> hors d'un RadioGroup. Utiliser des radios pour plus de sept options — préférer FormeSelect.