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.




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


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


Specify if/how this component resizes horizontally


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


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

We'll soon be deprecating this site. For the latest version of our documentation, go to our Storybook site!