Forms

Checkboxes

View in Figma

When to use checkboxes

  • Multi-select: when a user can select any number of choices from a set list.
  • Visibility of options: when users need to see all the available options up front at a glance.
  • Selecting/deselecting a large quantity of options. If the user needs to select or deselect 5 or more options (for instance, when selecting sites) prefer checkboxes to a multi-select.

When to consider something else

  • Booleans. Consider a Switch when a user needs to choose "on" or "off" for a single option.
  • Single selection. Use a Radio when a user must select one option from a list.
  • Don't need upfront visibility. Consider a Multi-select if there are a group of options but the user doesn't necessarily need full upfront visibility.

Usability guidelines

  • List options vertically. Horizontal checkboxes can make it tougher to tell which label relates to which checkbox.
  • Use positive statements. Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
  • Make the label selectable. The user should be able to click on either the label or the checkbox to select or deselect an option.

Radio Buttons

View in Figma

When to use radio buttons

  • Single selection. When users need to select one option out of a set of mutually exclusive choices and the number of options is small.
  • Visibility of options. When users need to see all the available options at a glance.

When to consider something else

  • Multiple selections. Consider Checkbox or a Multi-Select if users need to select more than one option.
  • A single selection. Consider a Switch if there is one item to select (on/off etc.).
  • Limited space. Consider a Select if you don’t have enough space to list out all available options.
  • Selecting none. Consider Checkbox if users should be able to select zero of the options.

Usability guidelines

  • Make the label selectable. The user should be able to click on either the label or the radio to select or deselect an option.
  • List options vertically. Horizontal radio buttons can make it tougher to tell which label relates to which radio.
  • Be intentional with defaults. Avoid default values in radios unless you have reason to believe that a meaningful percentage of users typically select a particular value.

Switches

View in Figma

When to use a switch

  • One single option. When a user needs to choose "yes" or "no" on one option (ie. for boolean operations that return true/false).

When to consider something else

  • Single selection. If the options to choose from are small and not space constrained, consider a Radio. If there is a list of options or the selection is space constrained, consider a Select.
  • Multi-select: When a user can select any number of choices from a set list consider either Checkbox or a Multi-select input.

Usability guidelines

  • List options vertically. Horizontal switches can make it tougher to tell which label relates to which switch.
  • Use positive statements. Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”

Selects

View in Figma

When to use selects

  • Space constraints. Use the select component when a user needs to choose from a large set of options with limited space to display them.

When to consider something else

  • Multi-select. If you need to allow users to select more than one option at once, you can consider a Multi-select. Users often don’t understand how to select multiple items from a dropdown, so also consider Checkbox.
  • Single selection from a small group. If space isn't constrained or if it would be a better experience to surface the options up front, consider Radio buttons.

Usability guidelines

  • Avoid dependent options. Avoid making options in one select menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.
  • Be intentional with defaults. Avoid default values in selects unless you have reason to believe that a meaningful percentage of users typically select a particular value.
  • Empty state. The empty state of a select should say "Select…".
  • Ordering of options. Most of the time alphabetical will make sense, but we have some use cases where alphabetical won't make sense (e.g., a time-based select with 1 minute, 1 hour, 1 day).
  • Option group headings. If the select has options which can be better understood if divided into groups, consider using headers to organize them.