Select
BetaBatch B. Pick one option from a short list.
When to use
Use to pick one option from a medium-length list that doesn't need search.
When not to use
For a few options, use Radio. For long lists, use Combobox.
Anatomy
Where the supplier is based.
Choose a region.
- Label
- Trigger showing the chosen option or a placeholder
- List of options in a popup
- Check mark on the chosen option
- Help text and error
Variants
One style. For long lists or typing to filter, use Combobox.
States
Pictures of each state. Use the live example on the Code tab to try the component.
| Default | Hover | Focus-visible | Disabled | Read-only | Invalid | |
|---|---|---|---|---|---|---|
| empty | Choose a region. | |||||
| filled | Choose a region. |
When open, the chosen option has a check mark and the highlighted option has a gray background. Open the live example on the Code tab to see it.