A radio button typically represents a single option in a group of related choices.
- 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.
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
- 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.
- One radio button should be selected as the default choice by using the
- Users are able to select an option with click/tap on the radio button or its label.
- Selecting one option unselects all others.
- Radio button labels are set in regular font weight, positioned to the right of the element, and should be as short as possible.
- Use a
legend(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 can be added below the radio button label or as a paragraph below the group.
- Do not include nested or additional elements within a radio group. Nesting may prevent a screen reader user from discovering nested controls or content.
TODO:Add additional accessibility specifications. Create an issue
Last updated at: