Radio Buttons
Radio buttons allow the selection of a single option from a set
Table of Contents
Edit this section, Opens in new windowOverview
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.
Usage
Radio Buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
Labels
Always use a clear and concise label for radio buttons. Be explicit about the action that will follow if the radio button is selected. Labels appear to the right of radio buttons. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words.
Default selection
A set of radio buttons should default to having one option selected. Never display them without a default selection.
Horizontal
With help text
Behaviours
States
Modifiers
Standalone
A Radio Button can be standalone, in use in other components.
Anatomy
- Legend (optional)
- Vertical radio buttons
- Clear and short label
- Legend (optional)
- Horizontal radio buttons
- Clear and short label