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
