Composant · Formulaire

Radio

Stable

Bouton radio pour un choix exclusif parmi plusieurs options. Les radios partageant le même attribut name forment un groupe : une seule sélection possible. Input natif, libellé requis.

Quand l'utiliser

Choisir une seule option parmi 2 à 5 choix exclusifs tous visibles.
Au-delà de ~6 options, préférez un Select.
Pour des choix cumulables, utilisez Checkbox.

Groupe

Les radios d'un même name s'excluent mutuellement.

Groupe

Runtime principal Runtime secondaire Runtime expérimental

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Radio label="Runtime principal" name="runtime" value="primary" checked />
  <Radio label="Runtime secondaire" name="runtime" value="secondary" />
  <Radio label="Runtime expérimental" name="runtime" value="experimental" />
</div>

États

Défaut / sélectionné

Non sélectionné Sélectionné

Avec texte d'aide

Plan Équipe Jusqu'à 20 sièges.

Désactivé

Indisponible Indisponible (sélectionné)

Erreur

Choix requis

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>Défaut / sélectionné</h3>
  <Radio label="Non sélectionné" name="states-a" />
  <Radio label="Sélectionné" name="states-a" checked />
  <h3>Avec texte d'aide</h3>
  <Radio label="Plan Équipe" name="plan" helperText="Jusqu'à 20 sièges." />
  <h3>Désactivé</h3>
  <Radio label="Indisponible" name="states-b" disabled />
  <Radio label="Indisponible (sélectionné)" name="states-b" checked disabled />
  <h3>Erreur</h3>
  <Radio label="Choix requis" name="states-c" invalid />
</div>

Anatomie

Élément racine : un <label> englobant (classe st-choice).
Bouton (.st-choice__input) : <input type="radio"> natif, couleur via accent-color.
Contenu : libellé (requis) + texte d'aide optionnel.

Accessibilité

Radios natifs : les flèches déplacent la sélection dans le groupe (name commun).
Le libellé englobe l'input : cliquer le texte sélectionne.
L'état erreur est visuel sur le radio; appliquez aria-invalid au groupe si toute la question est invalide.
Groupez sous un FormGroup avec légende pour un libellé de groupe accessible.

Lignes directrices

À faire

Présélectionner une option par défaut quand c'est raisonnable.
Afficher toutes les options ensemble verticalement.

À éviter

Utiliser des radios pour activer/désactiver une option unique : Checkbox.
Oublier l'attribut name partagé : la sélection ne s'exclut plus.

API

Prop	Type	Défaut	Description
`label`	`string`	requis	Libellé visible du bouton.
`helperText`	`string`	optionnel	Texte d'aide sous le libellé.
`invalid`	`boolean`	`false`	Active l'état erreur visuel du radio.
`class`	`string`	optionnel	Classe(s) sur le <label>.
Autres attributs	`HTMLInputAttributes`	N/A	Propagés sur l'<input> (name, value, checked, disabled…).

Tokens utilisés

--st-component-selection-checkedBackground
--st-component-control-focusRing
--st-component-control-invalidBorder
--st-component-field-labelText
--st-component-field-helpText
--st-component-control-disabledText