Radio button
Choosing · researchedA round control for choosing exactly one option from a set.
atom
Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.
Ant Design
Radio native: yes antd 6.6.5- Variants
- default, button, outline, solid
- Sizes
- large, medium, small
- States documented
- default, disabled
- Accessibility guidance
- no
Renders native input type=radio. Variant names are optionType (default/button) and buttonStyle (outline/solid); Radio.Group is on the same page.
2 corrected on re-read
- states_documented: ["default","hover","focus","active","disabled"] → ["default","disabled"] Only disabled prop documented; hover/focus/active not described on page
- a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance
Carbon
Radio button native: yes @carbon/react 1.117.0- Variants
- —
- Sizes
- —
- States documented
- focus, disabled, error
- Accessibility guidance
- yes
Source renders native input type=radio. Also documents read-only and warning states. Accessibility tab not confirmed from the fetched summary.
1 corrected on re-read
- a11y_documented: "unread" → "yes" radio-button/accessibility.mdx exists with What Carbon provides / Development considerations headings
GOV.UK
Radios superset native: yes govuk-frontend 6.5.1Material Web
Radio button native: no @material/web 2.5.0Primer
Radio subset native: yes @primer/react 38.40.1- Variants
- —
- Sizes
- —
- States documented
- disabled
- Accessibility guidance
- yes
Page says Radio must be used inside RadioGroup (separate component). Native input confirmed in source.
1 corrected on re-read
- a11y_documented: "unread" → "yes" Read /accessibility/: one heading, says use within radio group and see radio group accessibility
Spectrum
Radio button native: no @spectrum-web-components/button 1.12.4USWDS
Radio buttons native: yes @uswds/uswds 3.14.0Platform facts
Native elementinput type=radioRadios with the same non-empty name, same form owner (or both none) and same tree form a group in which only one is checked (spec). The spec says arrow-key behaviour is not defined there; APG itself notes browsers differ slightly from the pattern. required on any radio in a group with none checked gives valueMissing (spec constraint validation).
Baselinewidely · 2015-07-29
APG patternradio
ARIA roleradio
Shipped by7 of 7 systems
Anatomy
- radio group — APG role radiogroup; in HTML a set of inputs sharing a name, ideally in fieldset.
- group label — aria-labelledby/aria-label on the group; legend in HTML.
- radio — Each option (role radio). The spec says a tree must not contain an input whose radio button group contains only that element, so a group of one is non-conforming (stronger than 'at least two in practice').
- radio label — Accessible name of each radio.
Keys the APG binds
- Not in a toolbar. Tab and Shift + TabMove focus into and out of the radio group.
- Not in a toolbar. When focus moves into a radio groupIf a radio button is checked, focus is set on the checked button. If none of the radio buttons are checked, focus is set on the first radio button in the group.
- Not in a toolbar. Spacechecks the focused radio button if it is not already checked.
- Not in a toolbar. Right Arrow and Down Arrowmove focus to the next radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the last button, focus moves to the first button.
- Not in a toolbar. Left Arrow and Up Arrowmove focus to the previous radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the first button, focus moves to the last button.
- In a toolbar. SpaceIf the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.
- In a toolbar. Enter (optional)If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.
- In a toolbar. Right ArrowWhen focus is on a radio button and that radio button is not the last radio button in the radio group, moves focus to the next radio button. When focus is on the last radio button in the radio group and that radio button is not the last element in the toolbar, moves focus to the next element in the toolbar. When focus is on the last radio button in the radio group and that radio button is also the last element in the toolbar, moves focus to the first element in the toolbar.
- In a toolbar. Left ArrowWhen focus is on a radio button and that radio button is not the first radio button in the radio group, moves focus to the previous radio button. When focus is on the first radio button in the radio group and that radio button is not the first element in the toolbar, moves focus to the previous element in the toolbar. When focus is on the first radio button in the radio group and that radio button is also the first element in the toolbar, moves focus to the last element in the toolbar.
- In a toolbar. Down Arrow (optional)Moves focus to the next radio button in the radio group. If focus is on the last radio button in the radio group, moves focus to the first radio button in the group.
- In a toolbar. Up Arrow (optional)Moves focus to the previous radio button in the radio group. If focus is on the first radio button in the radio group, moves focus to the last radio button in the group.
- In a toolbarwhen navigating with arrow keys the checked button does not change.
The seven states
| default | Unchecked, or checked via the checked attribute. |
|---|---|
| hover | Pointer-only CSS state. |
| focus | Tab moves focus into and out of the group; arrows move and check. |
| active | Momentary press; the persistent state is checked. |
| disabled | disabled per radio or via fieldset. |
| error | required on a group with none checked fails validation (valueMissing). |
| loading | n/a — Not defined by APG or HTML. |
Every cell was read twice, the second time from raw sources by a separate pass. 4 of 35 fields changed on the second read — open any “corrected” note to see what it said before.