Radio button
A radio button typically represents a single option in a group of related choices.
Examples
Radio button states
Loading story...
Radio button group
Loading story...
Structure
- Legend: A title for a group of radio buttons.
- Radio button: The input element that provides the visual affordance for the control.
- Label: Text indicating the option.
- Help text (optional): Used to further clarify an option.
Guidelines
When to use
- Use radio buttons to present a set of options, where only one option can be selected at a time.
When not to use
TODO:
Add when not to use.
Create an issue
Appearance
- Radio buttons use high-contrast colors for labels and custom styles (based on Bootstrap) instead of browser defaults for the radio control.
- Radio buttons are vertically stacked, with one radio button per line.
Behavior
- One radio button should be selected as the default choice by using the
checked
attribute. - Users are able to select an option with click/tap on the radio button or its label.
- Selecting one option unselects all others.
Content
Label
- Radio button labels are set in regular font weight, positioned to the right of the element, and should be as short as possible.
Legend
- Use a
fieldset
withlegend
(set in bold font weight and positioned above the group of radio buttons) to group a set of radio buttons. Some screen readers will announce the contents of the legend before each nested input to maintain context for a user.
Help text
- Help text can be added below the radio button label or as a paragraph below the group.
Accessibility
TODO:
Add accessibility specifications.
Create an issueLast updated at: