Navigation
input
Floating
Display

Select Box

Lets the user select from a list of options

Code component(s): SingleSelect, MultiSelect

The selected option is shown and the other options are hidden until the user interacts with this component. When a persistently visible list of options is required, use Choice.

Anatomy

Options

Variant

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

Select Boxes 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.

Placeholder text

The text that’s shown when no option is selected

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

Select Box Item

There are two types of Select Box Items (each of which can be configured with a Label): 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

Keep options concise

Keep item labels concise so they’re fully visible when the menu isn’t showing

Related components