Learn about visual thememore

Selection box

Selection boxes present users with a choice to make or a question to answer before proceeding with a one-time process.

Demo

Link for section titled Usage
Usage

Use when

Use selection boxes when users must make a choice or answer a standalone question before proceeding with a one-time process such as a setup or configuration task. Selection boxes represent the only decision on a page.

undefined
Do use selection boxes to present standalone options during a one-time process such as onboarding.

Use selection boxes when options are abstract or potentially unfamiliar to users. Use icons and descriptions to provide additional insight.

undefined
Do use selection boxes to present options or categories that are unfamiliar to users.

Don't use when

Don't use selection boxes for repeatable tasks such as data entry. Use other selection controls, such as checkboxes or radio buttons, instead.

Don't use selection boxes for fewer than 3 options or more than 12 options. Use other selection controls instead.

undefined
Don't use selection boxes in tasks or workflows that users complete repeatedly.
undefined
Do use other selection inputs for data entry.

Don't use selection boxes for fewer than 3 options or more than 12 options. Use other selection controls instead.

Link for section titled Anatomy
Anatomy

1
Box
2
Checkbox or radio button
3
Header
4
Icon (optional)
5
Description (optional)
image

Link for section titled Options
Options

Icons

Use icons to add meaning and help users distinguish between options.

  • Don't use icons if they don't add useful information.
  • Don't reuse icons within a group of selection boxes.
  • Don't use icons with some selection boxes in a group but not others.
  • Don't use selection boxes with titles only. If neither icons nor descriptions are necessary, use other selection controls instead.

Descriptions

Use descriptions to add meaning and help users distinguish between options.

  • Don't use descriptions if they don't add useful information.
  • Don't use descriptions with some selection boxes in a group but not others.
  • Don't use selection boxes with titles only. If neither icons nor descriptions are necessary, use other selection controls instead.

Link for section titled Behavior and states
Behavior and states

Responsiveness

On smaller viewports, selection boxes hide their icons and use smaller typography and tighter spacing.

undefined

States

Unselected
undefined
Hover
undefined
Focus
undefined
Selected
undefined
Disabled
undefined

Link for section titled Content
Content

Keep headers and descriptions short and concise. Descriptions can be partial or complete sentences, but don't use more than a single sentence.

Link for section titled Layout
Layout

Selection boxes are center-aligned within a container based on the number of options and the container's width. Don't use other layouts with selection boxes.

undefined
Do center-align selection boxes and use matching heights.
undefined
Don't use custom layouts to arrange selection boxes.

Link for section titled Related information
Related information

Components

Guidelines