Radio button

Radio buttons are used to select a single item in a list of options.
  • Examples
  • Properties
  • Accessibility

Examples

Layout Variations

Web Component

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
SpaceToggles the selection state of the radio button between checked and unchecked

For comprehensive details on keyboard support for input fields, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Guidance for developers
  • Use clear and descriptive labels for radio buttons to help users understand their purpose.
  • Ensure each radio button has an associated label element using the for attribute to match the id attribute of the radio button.
  • Assign unique id attributes to each radio button to maintain accessibility and prevent conflicts.
  • The fieldset surrounds the entire grouping of radio buttons. The legend provides a description for the grouping.
  • Use the aria-describedby attribute to associate error messages with radio buttons for accessibility.
  • Ensure that error messages are tagged with unique id attributes and referenced correctly with aria-describedby on corresponding radio buttons.
Guidance for designers
  • Ensure focus indicators are clearly visible to aid navigation for keyboard users.
  • Keep input labels visible, even when fields are focused.
  • Use contrasting colors for text and backgrounds to enhance readability.
  • Design clear error states and feedback for accessibility.
  • Use spacing, typography, and visual cues effectively.
  • Maintain consistency in the design of radio buttons to provide a cohesive user experience.

Find live examples in the A11y style guide.

Roles and attributes

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend.

RoleElementUsage
groupdivIdentifies the div element as a group container for the radio buttons.

Resources

  • W3 Radio Button Group Example: Information about the radio button accessible behavior.
  • A11y Style Guide: Gives core recommendations for the accessible radio buttons.
  • W3C Forms Tutorial: Provides guidance on creating accessible forms.

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
  • Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
  • Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)