Radios are most commonly used to give users a way to make a selection from a set of options. Only one option can be selected at a time. Changing your selection removes another selection within a set. It’s not possible to deselect all options in a set. When presenting the user with radio buttons, one should always be selected by default. If this causes a problem, think of a way to disable/enable the radio button list — or look for another pattern to use.

States

Radios come in the following states:

Selected

Selection Value

Unselected

Selection Value

Disabled - Selected

Selection Value

Disabled - Unselected

Selection Value

Dimensions

Radios come in 2 sizes and fit either desktop or mobile use cases.

Desktop - 24px

Desktop - 16px

Mobile - 24px

Selecting the Best Input

Sometimes deciding which user interface element to use — radio buttons, checkboxes, or toggles — can be difficult. When determining which option will best fit your use case, consider the number and type of options, and if there is any clear default value. The below table summarizes questions and answers about these frequently used UI elements.

Scenario	Radio Buttons	Checkboxes	Single Checkbox	Toggle
How many options?	Multiple	Multiple	1	1
How many selections?	1	0 - all	2 (on/off)	2 (on/off)
Is there a default option?	Yes	No	Yes	Yes
What kind of choices?	Mutually exclusive	Independent	Mutually exclusive	Mutually exclusive
When does the selection take effect?	After submit button	After submit button*	After submit button	Immediately

* Filters activated by checkboxes may not require a submit button.

When to use radios

Use radios to:

Toggle single options within a list (another option has to be selected to toggle one selection off)
Want to emphasize and display all of the options
Have ~5 or fewer options to display
Want the user to be able to compare the options they have
Want to enable quick responses (i.e. a series of multiple choice options)

Use drop down menus when:

There is a default selection
A large number of options are available (~6 or more)

Guidance

Here are a few examples of how best to use radios.

Due to the size of the list of options (e.g. 4), it is easier for the user to see all of the options at once.

Due to the size of the list of options (e.g. 4), there is no benefit to the user to hide the other 3 options.

Due to the size of the list of options (e.g. 10), there is a benefit to the user to choose an item from a drop down.

Due to the size of the list of options (e.g. 10), it is more difficult for the user to see all of the options at once.

Show one item in the list selected by default as this reduces the users’ cognitive load.

Avoid showing a list of radios without a default option selected as this breaks the pattern users come to expect.

List radios in a vertical list format as it alleviates possible confusion about which label belongs to which radio button.

Avoid listing radios in a horizontal format as it is challenging for users to tell which label belongs to which radio button.

Show all items in a vertically aligned list with clear, understandable labels.

Avoid nesting radios under each other as this will increase a user’s cognitive load.

Spacing Guidelines

We suggest the following spacing guidelines for desktop and mobile use cases.

Mobile - 24px

Desktop - 24px

Desktop - 16px

Helpful Links

Portfolio

Partners