On this page
Overview
Show code, ProjectVisibility.tsx
Variants
Sizes
A select comes in small, medium and large, the control heights of the scale, as tall as a TextField of its size: without a visible label, it lines up with the buttons beside it.
- Without a size of its own, it takes its container's.
- Without a visible label, as in a toolbar, it is as wide as its longest option.
A small select beside small buttons in a toolbar.
Show code, SmallToolbar.tsx
Anatomy
Select
Label
Trigger
Value
Chevron
Description
Show code, SelectAnatomy.tsx
List
Option
Check
Show code, SelectListAnatomy.tsx
Behaviour
States
While nothing is chosen, the trigger shows a placeholder.
- People can't clear a choice, only make another.
- An option can be unavailable, so it can't be chosen. Its label takes the disabled color, and a description under it, in the muted color, can say why.
Typing in the open list
Typing an option's first letters in the open list highlights it, and Enter chooses it.
In list rows
A row's title names the select in it, so the select shows no label of its own.
Show code, SettingRows.tsx
Rules
Start on the option most people want, and let choosing do nothing but set the value.
Use it when
- One of several known options, such as a role, a sort order or a time zone
- A setting in a row or a toolbar, such as a digest's frequency or a zoom level
Defaults
Choose a default where one option suits most people. A placeholder makes everyone choose: keep it for a choice people must make themselves.
Order
Order options naturally, such as by frequency, or alphabetically where there is no order.
Side effects
Choosing an option only sets a value. It never moves to another page or runs a destructive action.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to and from the trigger; in the list, closes it. |
| Enter, Space, ↓, ↑ | Opens the list at the chosen option. |
| A letter on the trigger | Chooses the next option that starts with it. |
| ↓, ↑, Home, End | Highlight an option in the open list. |
| Enter, Space | Chooses the highlighted option and closes the list. |
| Esc | Closes the list without choosing. |