1. Labels

Radio must include a clear, contextual label to help the user make their selection.

2. Usage

Radio Buttons are used when the user must select exactly one choice. If the user needs to select any number of choices (zero, one or several) use Checkboxes instead.¹

3. Radio Button vs Dropdown Select From Input

Use Radio Buttons over Dropdown Selects where space permits. This allows all options to be visible to the user, who can easily compare them.¹

4. Default Selection

Have a default Radio Button option selected whenever possible. A default choice is a strong suggestion to the user that helps them make their decision and increases their confidence in the app. When the frequently selected choice is set to be the default, it helps users expedite their tasks. If users need to refrain from making a selection, you should provide a radio button labeled “None.” Use analytics to help determine what our users commonly select.²

5. Click Area

Users should be able to select an option by clicking on the radio or the label associated with it. A larger target area helps prevent user error and allows them to quickly execute their tasks.¹

6. Spacing

Where space permits, lay out your Radio Button lists vertically, with one choice per line. You can use a horizontal layout but only with ample space between options so it’s abundantly clear to the user which choice goes with which label. Refer to our spacing system to learn more about "core" units.¹

7. Disabled States

Use our new disabled styling on Radio Buttons and don’t change the opacity to indicate a disabled state. ³