Introduction
A radio button enables users to choose a single option from a list of two or more options. Radio buttons offer users the ability to select precisely one option from a group of options that are mutually exclusive. By clicking a non-selected radio button, any previously selected button within the group will be deselected, ensuring that only one option can be chosen at a time. Radio buttons and checkboxes are not to be used interchangeably.
- Radio buttons can be used in forms to display mutually exclusive options
- If there are a large sum of options or space is limited, consider using a select menu instead
Usage
Use radio buttons to display mutually exclusive options, meaning the user can only choose one.
If the user can choose multiple options, opt for checkboxes instead.
Give each radio button a descriptive and short label.
Don't use unclear or overly long labels, if possible.
While radio buttons should be used vertically, you can opt to place them horizontally where the short nature of the label allows for a horizontal alignment.
Be considerate of white-space and breaks in grids when styling radio button lists. Opt for vertically lists in most cases.
Use a list of radio buttons for seven or fewer options
If you need to display a large list of mutually exclusive options, opt for select menu.
Mobile Specs
Display radio buttons on full width (100vw, or 100%) on mobile
In order to avoid uneven designs, make sure to not use radio buttons at varying widths. Opt for 100vw instead.
Radio buttons should be used vertically, except for in cases like title where the short nature of the label allows for a vertically alignment.
Be considerate of white-space and breaks in grids when styling radio button lists. Opt for vertically lists instead.
Also known as
Radio, Radio group, Select