Radio Group

Purpose

Radio groups allow users to select exactly one option from a set of two or more choices. Use them when all options should be visible simultaneously and only one selection is allowed.

Usage Guidance

Use native <input type="radio"> elements
Group all options in a <fieldset> with a <legend> describing the group
Pre-select a default value when there is a clear sensible default
Use roving tabindex only for custom radio groups requiring arrow-key navigation

Keyboard Support

Key	Action
`Tab`	Move focus into the radio group (to the checked item, or first unchecked)
`Arrow Right` / `Arrow Down`	Move to and select next radio button
`Arrow Left` / `Arrow Up`	Move to and select previous radio button
`Space`	Select the focused radio button if not already selected

Screen readers announce the group name (from <legend>), the option label, and whether it is selected. The number of options may also be announced.

ARIA Requirements

Native radio inputs require no ARIA
Custom radio groups need role="radiogroup" on the container, role="radio" on each item, and aria-checked on each item

Common Mistakes

Missing <fieldset> and <legend> grouping
Using checkboxes when only one selection should be allowed
Implementing custom radio buttons without roving tabindex or arrow key support

Live Example

What is your primary accessibility concern?

Responding to a demand letter or lawsuit Building a new accessibility program Conducting an accessibility audit Managing vendor accessibility

Code Example

<fieldset>
  <legend>Select your primary concern:</legend>

  <label>
    <input type="radio" name="concern" value="legal">
    Legal response
  </label>

  <label>
    <input type="radio" name="concern" value="program">
    Program building
  </label>

  <label>
    <input type="radio" name="concern" value="audit">
    Audit planning
  </label>
</fieldset>