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
Use when the user must select one option from a set
Radio buttons should present mutually exclusive options — only one can be selected at a time.
Write option labels that clearly describe the choice
The label should represent what the user is selecting.
✅ Standard room / Deluxe room
✅ Pay now / Pay at check-in
✅ Daily / Weekly / Monthly
🚫 Click to select / Choose one
Keep labels short and scannable
One line is ideal. If more detail is needed, use helper text below the option.
Be consistent in structure and style
Parallel phrasing makes options easier to compare.
✅ Credit card / Bank transfer / PayPal
🚫 Use a credit card / Bank transfer is also possible / Pay with PayPal
Phrase options as selections, not actions
Radio buttons represent a choice, not a button press.
✅ English / French / German
🚫 Select English / Switch to French
Use sentence case with no punctuation
✅ Include breakfast
🚫 Include Breakfast.
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.