Guidelines
Single Selection
No more than one option from a radio group can be be selected.
- For lists with more than ten options, consider using a Checkbox
- If there are two options showing an on/off setting, consider using a Toggle
Options alphabetically by default
Present the options in a logical order for the best context. Some examples include alphabetically or by priority.
Label positon
Always position radio button to the left of their labels. This makes them easier to find, especially for users who use screen magnifiers.
Content
Radio buttons allow users to choose "one of" in a set of options. Write the titles (group labels) using full sentences or questions to clearly state what the user is being asked to choose from. Write options (radio labels) as short as possible to keep them scannable for users.
Tone
Use an actionable tone when writing content for titles (group labels), questions work well for this. The options (radio labels) should be in a neutral tone.
Do
- Write radios in a way the user understands that they can "Choose one of..."
- Keep radio labels short and clear.
- Use sentence case for titles (group labels) and options (radio labels).
Do not
- Include punctuation after options.
Accessibility
The component is composed of at least two parts: the radio input and the label. The group label is an optional part of the component if it's not used as part of a form. You can substitute a group label with a different text component. A radio input can exist separately as part of a different component, but not as a standalone element.
- The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend> provides a description for the grouping.
- Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps user who use assistive technology to understand the question they are answering with the group of radio buttons.
- WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. In option #2 the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group.
WCAG 2.1 Guidelines
1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)
3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)
4.1.2 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)
Interaction
Both radio inputs and labels are interactable, this makes the component more accessible.