Radio

Candidate

Radio permet de choisir une option exclusive lorsque les alternatives doivent rester visibles. Les controles d’un meme groupe partagent toujours le meme attribut name.

Variants

Quotidienne Hebdomadaire Mensuelle

Audience Activation sur les segments et destinations Audience. ServerSide Activation pour les flux de donnees cote serveur.

Variant	Role
Default	Liste compacte d’options courtes
Card	Option accompagnee d’une description utile
Error	Groupe incomplet ou valeur invalide
Disabled	Option connue mais indisponible

Size

La V1 propose une seule taille de controle. La variante Card change la surface et le padding, pas la taille du Radio. Dimensions et densite restent a valider dans Figma.

States

default represente une option disponible.
hover renforce la bordure et la surface Card.
focus-visible affiche un outline autour du controle.
checked utilise le style selectionne et l’etat natif.
disabled bloque la selection et reduit l’emphase.

Astro

---
import Radio from '../components/ui/Radio.astro';
---

<fieldset>
  <legend>Frequence d'export</legend>
  <Radio label="Quotidienne" name="frequency" value="daily" checked />
  <Radio label="Hebdomadaire" name="frequency" value="weekly" />
</fieldset>

HTML output

<label class="pixel-radio">
  <input type="radio" name="frequency" value="daily" checked />
  <span class="pixel-radio__control" aria-hidden="true"></span>
  <span class="pixel-radio__label">Quotidienne</span>
</label>

Tokens

--radio-background-*, --radio-border-*, --radio-dot, --radio-focus-ring, --radio-label, --radio-description, --radio-size, --radio-dot-size, --radio-gap, --radio-card-*, --radio-disabled-opacity.

Do / Don’t

Do	Don’t
Regrouper les Radios dans un `fieldset` nomme.	Utiliser des attributs `name` differents dans un meme choix.
Afficher toutes les options comparables.	Utiliser Radio pour une liste tres longue ou dynamique.
Selectionner une valeur par defaut lorsqu’elle est sure.	Preselectionner une option sensible sans consentement.
Utiliser Card seulement si la description aide le choix.	Transformer chaque option courte en grande Card.

Accessibility

Le composant conserve input type="radio". Dans un fieldset, les fleches directionnelles changent le choix et Tab quitte le groupe. Le legend doit decrire la decision, et non repeter chaque option.