Choice

Choice lets users easily see all the items available to them without any interaction, so prefer it over Select Box (which you should use when vertical space is limited).

Anatomy

Options

Variant

Choose between Single-select (ie, using Radios) or Multi-select (ie, using Checkboxes)

Choices typically start with nothing selected. For Single-select variants, once the user selects an item an item must always be selected. In contrast, users are able to deselect all items in the Multi-select variant.

Disabled

In some circumstances you may want to temporarily prevent the user from interacting with this component, yet still show them that they may interact with this component when it’s in a different state

Width

Specify if/how this component resizes horizontally

Sub-components

Choice Item

There are two types of Choice Items (each of which can be configured with a Label and optional Description): Single-select Item and Multi-select Item

Guidelines

Wrap in a Field

Wrap this component in a Field so that it has a persistent label (especially for screen readers) and can show validation error messages

Limit the number of options to 5

Keep the number of options to a minimum—if you require more than 5 options consider using Select Box instead

Related components

• Field
• Select Box