components
Radio (design)
Radio enables a user to make a single selection from a group of options.
Usage
Use radio buttons where users must make a single selection from a list of options.
Options
Label
Radio buttons should always be accompanied by a label for a correct semantic markup. This makes the radio accessibile for the broadest range of users.
Helper message
An inline helper message can be added to aid in use.
Guidelines
Label groups of radio buttons
A set of related radio buttons should always be grouped using Fieldset. The Fieldset element ties related radio buttons together in a way that is accessible to people who cannot see the visual layout and rely on assistive technology.
Text overflow
If the label text is too long for the available space, it wraps to another line.
Should I use a Checkbox instead of Radio Buttons?
When users have to choose from two mutually exclusive options, you could use a single Checkbox instead of radio buttons.
Related components
- To create a simple list of option where the user can make multiple selections, use the Checkbox or Checkbox Choice component.
- When a user needs to make a binary choice (on/off), use the Switch component.