molecule · stable · extension · since 2026-09
AnswerButtons
Purpose
The buttons a wizard’s question is answered with: Oui, Non, and sometimes Non applicable, one group named by the question, the retained one said by its state and drawn by its fill.
When to use, when not
Use it for every answer a wizard takes with a click. Not for a verdict the tool concluded itself (AutoVerdict), not for a form’s radio group, which is RadioGroup.
Anatomy
- A group, named by the question.
- One button per answer, with its label and its shortcut key.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
answers | Answer[] | The answers offered, in order. | |
value? | string | null | undefined | null | The answer retained, if any. |
onanswer | (value: string) => void | Called with the value of the answer pressed. | |
labelledBy | string | The id of the question, which names the group. | |
class? | string | '' | Layout classes only. |
States
Nothing retained, Oui retained, and three answers with Non applicable.
none
Light
Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?
Dark
Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?
320 px, light
Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?
320 px, dark
Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?
216 px, light
Forced colours, captured
retained
Oui retained: aria-pressed and the fill, no character added to the label.
Light
Critère 6.1 Ce lien est-il explicite ?
Dark
Critère 6.1 Ce lien est-il explicite ?
320 px, light
Critère 6.1 Ce lien est-il explicite ?
320 px, dark
Critère 6.1 Ce lien est-il explicite ?
216 px, light
Forced colours, captured
three
A third answer, Non applicable, with its key.
Light
Critère 1.3 L'alternative de cette image est-elle pertinente ?
Dark
Critère 1.3 L'alternative de cette image est-elle pertinente ?
320 px, light
Critère 1.3 L'alternative de cette image est-elle pertinente ?
320 px, dark
Critère 1.3 L'alternative de cette image est-elle pertinente ?
216 px, light
Forced colours, captured
Accessibility contract
- Role and name:
role="group"named by the question througharia-labelledby; each answer is abuttonwitharia-pressed. - Keyboard, focus: Tab reaches each button, Enter or Space presses it; the letter shortcuts are the page’s listener, not the buttons’.
- Live regions: none; the wizard says what the answer did, if anything.
Content rules
French. Oui, Non, Non applicable; never Valider or OK. The key is the capital letter printed on the key cap.
Do and don’t
- Do name the group by the question’s id.
- Do not add a check character to the retained label: the state is the attribute, and a reader spells characters out.
Examples
<AnswerButtons labelledBy="q-2-2" value={answer} onanswer={(v) => (answer = v)} answers={[{ value: 'C', label: 'Oui', key: 'O' }, { value: 'NC', label: 'Non', key: 'N' }]} />Surfaces
- Extension: every wizard question.
Related
Question, Kbd, WizardFooter.
Decisions
- 2026-09-26: one component for the five families of answer buttons the wizards had grown, so the keyboard shortcuts and the retained state have one shape.
Criteria held by construction
- 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
A group of toggle buttons: role group named by the question, aria-pressed on each, a real button element that the keyboard operates. - 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
The retained answer is said by aria-pressed and drawn by a fill, a change of shape; it never rests on a hue alone. - 12.10, Dans chaque page web, les raccourcis clavier n'utilisant qu'une seule touche sont-ils contrôlables par l'utilisateur ?
The single-key shortcut of each answer is printed on the button, next to what it drives.
Tokens it reads
- Colour:
--rl-hover,--rl-ink,--rl-line-strong,--rl-on-fill - Typography:
--rl-weight-bold,--rl-text-sm - Spacing:
--rl-space-2,--rl-space-3,--rl-space-4 - Layout:
--rl-radius,--rl-border-strong