INPUTS / COMPONENTS
Select
Choose one option from a list.
About select
Required copy, this will always be here
Anatomy
Shared parts, named consistently.
- 1DropdownRequired
A dropdown to open the list.
- 2LabelRequired
The label of the dropdown.
- 3AsterixRequired
A star to show when required.
- 4Selected options textRequired
A text string to show the number of options selected.
- 5IconRequired
An icon to show if opened or closed.
- 6Helper message
A string below the input to provide additional context about the Dropdown. When in an error state, the helper message will turn red.
- 7PanelRequired
Container with a list of option items.
- 8Select field
Contains optional placeholder text, which is replaced by the selection.
- 9Check markRequired
A check mark indicates selection or confirmation in interfaces, signifying chosen options or actions.
Try the default
A working example with the shared V1 visual language.
When to use
Use when a single choice is needed and the options do not need to remain visible. Preserve a persistent label.
Space or Enter opens; arrows navigate; typing finds options; Enter selects; Escape closes and restores focus.