Radio buttons
Lets users select one option from a set.
Examples
Allows the user must select one mutually exclusive option from a small to medium list.
Usage
Use radio buttons when the user must select only one option from a small to medium list of mutually exclusive choices.
Do:
- arrange radio buttons vertically when there are more than three options to improve readability
- order the list in an alphabetical or logical manner, for example, from least to most effective
- consider setting a default option if there is a clearly preferred or most commonly selected choice based on user data or research
- display the entire list on the page when there are five or fewer options
- the <label> tag so users can click the label, not just the small radio button
- use the aria-checked attribute to indicate which radio button is selected and which are not
- apply the aria-labelledby attribute to provide a clear label for the group of radio buttons
- make it focusable and keyboard accessible, two options available:
- aria-activedescendant attribute which would be included in the container of the group of radio buttons
- having a tabindex attribute in each of the radio buttons
Avoid:
- nesting a group of radio buttons within another radio button option
- radio buttons for two mutually exclusive options if one can be implied by a single checkbox (for example, “Subscribe to newsletter”, ticked = yes, unticked = no)
- using radio buttons when users may need to select none, one, or multiple options from a list, a checkbox group would be more appropriate in such cases
- if there are five or more familiar options, consider using a single select (dropdown), unless side-by-side comparison is important
Parameters for turas-radio-buttons
- asp-for - Binds the radio buttons to a model property
- asp-items - Specifies the list of items to be displayed as radio buttons
- guidance-text - Provides additional guidance text for the radio buttons
- additional-classes - Allows for custom CSS classes to be added to the radio buttons
- hide-validation-message - Hides the validation message for the radio buttons
- hide-label - Hides the label for the radio buttons
Testing
Check that the radio buttons:
- show a visible focus state on the radio button that has keyboard focus
- focus moves logically in and out of the radio button group
- screen readers announce the group question, each option and which option is selected
- hint text or instructions are read out by screen readers
- error messages are announced by screen readers and associated with the radio buttons
- selecting an option does not automatically submit the form, move focus or take users to another page
- users are told when they must select an option
- remains usable at 400% zoom and supports reflow without horizontal scrolling
- makes it clear when selecting an option will reveal additional fields
- users can select an option by clicking or tapping its label
Developer considerations
When using the radio buttons component in your form:
- use native radio buttons where possible
- group related radio buttons using <fieldset> and <legend>
- make sure the <legend> clearly describes the question or choice
- give every radio button in the group the same name value
- provide an associated <label> for each radio button
- use aria-describedby to associate hint text or error messages with the group
- avoid pre-selecting options unless there is a clear user benefit and it does not create a risk of unintended choices
- make sure button components maintain native radio button behaviour
- write error messages that explain what went wrong and how to fix it
- make sure the control works without JavaScript where possible
- make sure a visible focus state that meets contrast requirements
- make sure the component remains usable when text is resized and content reflows
- make sure sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels
Required fields
If your form contains fields that users must complete:
- clearly indicate when the radio button or group is required by using a visual indicator such as an asterisk
- do not rely on the visual indicator alone (for example, an asterisk) to communicate that a field is required and include the help text “Required fields are marked with an asterisk *” at the top of every page of the form
- make sure the required state of the radio button or group is programmatically available to assistive technologies using aria-required="true"
Conditional behaviour
If your radio buttons reveal additional content based on a user's selection:
- only reveal content when it is logically dependent on the selection
- do not automatically move focus when content is revealed
- place revealed content directly after the radio button that controls it in the DOM
- hide the content from all users, including assistive technology users, until it is needed
- make sure hidden fields are not focusable
- when revealed, make sure the content is reachable in the natural tab order
- consider adding hint text to explain that additional fields may appear
- use the Turas conditional reveal pattern so the new content is available to screen readers