Composant · Formulaire

RadioGroup

Stable

Choix exclusif parmi plusieurs options. Le name partagé garantit l'exclusivité radio ; valeur contrôlée unique et légende fieldset.

Exemples

Vertical (par défaut)

Livraison

Choisissez un mode unique.

Standard (3–5 j) Express (24 h) Retrait en point relais

Voir le code (Svelte)

<RadioGroup
  legend="Livraison"
  name="shipping"
  value="standard"
  helperText="Choisissez un mode unique."
  options={[{"label":"Standard (3–5 j)","value":"standard"},{"label":"Express (24 h)","value":"express"},{"label":"Retrait en point relais","value":"pickup"}]}
/>

orientation="horizontal"

Taille

S M L

Voir le code (Svelte)

<RadioGroup
  legend="Taille"
  name="size"
  orientation="horizontal"
  value="m"
  options={[{"label":"S","value":"s"},{"label":"M","value":"m"},{"label":"L","value":"l"}]}
/>

API

Prop	Type	Default
`legend`	`string`	requis
`name`	`string`	requis
`options`	`{ label, value, disabled?, helperText? }[]`	`[]`
`value`	`string`	–
`onchange` / `onChange`	`(value: string) => void`	–
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`
`helperText`	`string`	–
`disabled`	`boolean`	`false`

Rend un fieldset/legend natif. React expose onChange ; Svelte/Vue exposent onchange (ou @change).

Tokens utilisés

--st-semantic-text-primary
--st-spacing-1 … --st-spacing-12