Radio

Sélection mutuellement exclusive — exactement un choix. Forme ronde (NN/g) : le carré signale une checkbox. Toujours dans un <agtc-radio-group> qui gère l'exclusivité, le focus roving et la navigation aux flèches. Mutually exclusive selection — exactly one choice. Round shape (NN/g): square signals a checkbox. Always inside an <agtc-radio-group> handling exclusivity, roving focus, and arrow navigation.

ÉtatsStates

Groupe « Formule »"Plan" group

Gratuit Pro Équipe (bientôt)Team (soon)

Navigation clavierKeyboard navigation

ToucheKey	Action
`Tab`	Entre/sort du groupe (focus roving)Enter/leave the group (roving focus)
`↓` / `→`	Option suivante (sélectionne, boucle)Next option (selects, wraps)
`↑` / `←`	Option précédente (sélectionne, boucle)Previous option (selects, wraps)
`Espace`	Sélectionne l'option focalisée (`Entrée` réservé à la soumission)Selects the focused option (`Enter` reserved for submission)

Règles absoluesAbsolute rules

Forme ronde — jamais carrée (le carré = checkbox)Round shape — never square (square = checkbox)
Toujours dans un <agtc-radio-group>Always inside an <agtc-radio-group>
Pré-sélectionner un défaut sensé (sauf exception éthique/légale)Pre-select a sensible default (except ethical/legal cases)
Sélection multiple attendue — utiliser des checkboxesMultiple selection expected — use checkboxes

Tokens de composantComponent tokens

Token CSS	Référence sémantiqueSemantic reference	Valeur résolueResolved value
`--agtc-radio-default-background`	`semantic.color.background.surface`	#ffffff
`--agtc-radio-default-border`	`semantic.color.border.default`	#e8e8e8
`--agtc-radio-default-border-hover`	`semantic.color.action.primary`	#007a68
`--agtc-radio-default-border-focus`	`semantic.color.border.focus`	#007a68
`--agtc-radio-default-fill`	`semantic.color.action.primary`	#007a68
`--agtc-radio-default-label`	`semantic.color.text.primary`	#202020

ImplémentationImplementation

<agtc-radio-group name="plan" value="pro" label="FormulePlan">
  <agtc-radio value="free">GratuitFree</agtc-radio>
  <agtc-radio value="pro">Pro</agtc-radio>
  <agtc-radio value="team">ÉquipeTeam</agtc-radio>
</agtc-radio-group>

UX Patterns Reference

Patterns approved by the Design System Lead via the ux-pattern-review workflow (see .claude/rules/ux-patterns-sources.md and ADR-036). Decision: all approved.

Pattern	Source	Applied	Justification
Round shape (square = checkbox)	NN/g — checkboxes vs radio	✅	`border-radius: 9999px`
Mutually exclusive selection (exactly 1)	NN/g	✅	Group manages exclusivity
Pre-select a sensible default (except exceptions)	NN/g — radio default selection	✅	Group `value` — usage guidance
Vertical stacking, one option per row	NN/g	✅	Layout recommendation
Clickable label (dot or text) — Fitts	NN/g · IxDF	✅	The whole option is clickable
Touch target ≥ 24×24px	IxDF	✅	`min-height: 24px` (WCAG 2.5.8)
Arrow navigation = selection (native radio)	NN/g	✅	Managed by the group (WAI-ARIA radiogroup)
Complete visible states	NN/g	✅	default/hover/focus/selected/disabled