Segmented

Contrôle segmenté mono-sélection à effet immédiat (2–5 options courtes) : bascule de langue, densité, vue liste/grille. Groupe de boutons natifs + aria-current — distinct du groupe radio (formulaire) et des onglets (panneaux). Single-select segmented control with immediate effect (2–5 short options): language toggle, density, list/grid view. Native button group + aria-current — distinct from radio group (forms) and tabs (panels).

AperçuPreview

Quand l'utiliserWhen to use

Règles absoluesAbsolute rules

• Toujours exactement un segment actif (aria-current="true")Always exactly one active segment (aria-current="true")
• 2 à 5 options, libellés courts ; au-delà → select2 to 5 options, short labels; beyond → select
• État sélectionné = fond plein + poids 700 (pas la couleur seule)Selected state = solid fill + weight 700 (not color alone)
• Jamais role="radiogroup" ni tablist pour un effet immédiatNever role="radiogroup" or tablist for immediate effect
• Jamais sans aria-label de groupeNever without a group aria-label

Tokens de composantComponent tokens

AccessibilitéAccessibility

• role="group" + aria-label sur le railrole="group" + aria-label on the track
• Segment actif : aria-current="true" ; boutons natifs (Tab, Entrée/Espace)Active segment: aria-current="true"; native buttons (Tab, Enter/Space)
• :focus-visible tokenisé par segmentTokenized :focus-visible per segment
• Contraste sélectionné (blanc sur teal) ≥ 4.5:1Selected contrast (white on teal) ≥ 4.5:1

ImplémentationImplementation

<agtc-segmented label="Langue" value="fr"></agtc-segmented>
<script>
  const s = document.querySelector('agtc-segmented');
  s.options = [{ value: 'fr', label: 'FR' }, { value: 'en', label: 'EN' }];
  s.addEventListener('change', (e) => setLanguage(e.detail.value));
</script>

DOs et DON'TsDOs and DON'Ts

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036/044). Decision: SG1–SG8 all approved.