On this page
Overview
Show code, ChooseOwner.tsx
Anatomy
Field
Chip
Chip label
Remove
Input
Clear
Trigger
Show code, ComboboxAnatomy.tsx
List
Option
Leading content
Check
Show code, ComboboxListAnatomy.tsx
Behaviour
States
A read-only field can be focused and its list browsed, but its value can't change; its chevron stays, muted, and doesn't answer the pointer, as a read-only Select's.
Typing to filter
The list narrows as people type, and the whole list opens again from the field's button.
Several reviewers
Where people choose several options, each shows as a chip in the field, and the list stays open as they choose.
Show code, Reviewers.tsx
Search on a server
The application can find the options itself, such as on a server, and a spinner shows while it searches.
Show code, ServerSearch.tsx
In a form
A required field shows its error when the form is sent without a value.
Show code, RequiredInForm.tsx
Adapting to width
A field fills its container, and chips wrap onto more rows.
Show code, WrappingChips.tsx
Rules
A combobox's value is always one of its options.
Use it when
- One option from a list long enough to search, such as an owner
- Several options from such a list, shown as chips
- Options found by a search, such as contacts on a server
Optional values
Give an optional value a clear button, so people can remove it, not only change it.
Options
Options people could mistake for each other need telling apart, and only options are values.
- Give options that share a label a description, such as an e-mail address.
- Text people type is never the value: offer it as an option instead.
Labels
Name the field after what people choose, and use the placeholder for what to type.
A field without a visible label, such as in a toolbar, says what to type in its placeholder.
Show code, SmallToolbar.tsx
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to and from the field; its buttons and chips take no tab stop. |
| Typing | Filters the options and highlights the first match. |
| ↓, ↑ | Opens the list, or moves the highlight. |
| Enter | Chooses the highlighted option. |
| Esc | Closes the list; on a closed clearable field, clears it. |
| Backspace in empty text | Removes the last chip. |
| ← at the start of the text | Moves to the chips; Backspace removes the focused one. |