i

Radio button group

Choosing · researched

A labelled set of radio buttons from which a person chooses exactly one option.

molecule · Carbon: RadioButtonGroup · contains radio-button, fieldset

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.Group native: partly antd 6.6.5
Variants
default, button (optionType), outline, solid (buttonStyle)
Sizes
large, medium, small
States documented
disabled
Accessibility guidance
no

Div with role=radiogroup around native input[type=radio] options; optionType=button with Radio.Button renders button-styled radios.

1 corrected on re-read
  • states_documented: null → ["disabled"] Radio.Group API: disabled "Disable all radio buttons"

docs ↗ · code ↗

Carbon

RadioButtonGroup native: yes @carbon/react 1.117.0
Variants
horizontal, vertical
Sizes
—
States documented
disabled, error
Accessibility guidance
yes

Renders fieldset with optional legend around native radio inputs; orientation default horizontal. Documented within the Radio button page.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/radio-button/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/RadioButtonGroup"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/radio-button/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/RadioButtonGroup"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/radio-button/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

Radios native: yes govuk-frontend 6.5.1
Variants
Inline radios, Radio items with hints, Radio items with a text divider, Conditionally revealing a related question
Sizes
Smaller radios
States documented
default, hover, focus, disabled, error
Accessibility guidance
no

Macro renders a fieldset with legend and native input type=radio items; includes conditional reveal, divider ('or') and inline variant.

3 corrected on re-read
  • variants: null → ["Inline radios","Radio items with hints","Radio items with a text divider","Conditionally revealing a related question"] Page headings under How it works
  • sizes: null → ["Smaller radios"] Page heading "Smaller radios" (govuk-radios--small)
  • states_documented: ["default","focus","disabled","error"] → ["default","hover","focus","disabled","error"] Page has error examples; disabled item option in macro-options; scss has :hover, :focus, :disabled

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. md-radio groups by shared name; radio.md tells authors to wrap radios in role=radiogroup with a label. No group component.

Primer

RadioGroup native: yes @primer/react 38.40.1
Variants
—
Sizes
—
States documented
disabled, error
Accessibility guidance
yes

Primer React. Same internal CheckboxOrRadioGroup as CheckboxGroup: fieldset with legend when labelled; children are native radio inputs via FormControl. Status ready.

1 corrected on re-read
  • states_documented: null → ["disabled","error"] Props table has disabled; examples With a validation message

docs ↗ · code ↗

Spectrum

Radio group native: partly @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, disabled, error
Accessibility guidance
no

Docs from the rsp page and RadioGroup.json. S2/v3 build on React Aria Radio, which renders a native input type=radio; SWC 1st-gen sp-radio-group is in the radio package, which is installed at 1.12.4. The accessibility fragment is the generic Button keyboard table.

2 corrected on re-read
  • builds_on_native: "yes" → "partly" Group wrapper is a div with role (RAC useCheckboxGroup role=group / RadioGroup radiogroup); items are native input elements
  • a11y_documented: "yes" → "no" rsp accessibility fragment is the Button keyboard table (identical to rsp button fragment), not about this component

docs ↗ · code ↗

USWDS

Radio buttons native: yes @uswds/uswds 3.14.0
Variants
default, tile (usa-radio__input--tile)
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Index said not shipped. Radio buttons page is the group: a fieldset and legend wrapping several usa-radio items. Docs name no separate single-radio component.

docs ↗ · code ↗

Platform facts

Native elementfieldset with legend containing input type=radioAPG: 'a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time'. Some implementations start with none checked. Native radios share one name. APG note: some browsers focus the last radio on Shift+Tab when none is selected, differing from APG. MDN fieldset implicit role group (radiogroup is a permitted role).
Baseline—
APG patternradio
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. radio group — APG: radio buttons are contained in or owned by an element with role radiogroup; HTML fieldset with legend.
  2. group label — APG: radiogroup has a visible label via aria-labelledby or aria-label; HTML legend.
  3. radio button — APG: each has role radio and aria-checked; HTML input type=radio.
  4. radio label — APG: each radio is labelled by its content, aria-labelledby or aria-label; HTML label.
  5. description text optional — APG: aria-describedby on the radiogroup or radio elements.

Keys the APG binds

  • Tab and Shift + TabMove focus into and out of the radio group. When focus moves into a radio group:
  • If 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.
  • Spacechecks the focused radio button if it is not already checked.
  • 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.
  • 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.

The seven states

default One button checked, or none initially (APG).
hover Pointer-only CSS state; not defined by APG or HTML.
focus APG: focus goes to the checked radio, else the first.
active Pressed state while the pointer or key is down; CSS :active. Not defined by APG.
disabled disabled on a radio or the fieldset; APG radio page does not define a disabled state.
error Spec radio button group constraint validation: if an element in the radio button group is required and none of the group's elements is checked, the element suffers from being missing (valueMissing). Message text is the author's.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 8 of 35 fields changed on the second read — open any “corrected” note to see what it said before.