Select
One choice from a list of up to about fifteen options. For more, or when people know what to type, a searchable combo box fits better.
- Select
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Select
Priority
Urgent needs an owner.
StatusPick a status that fits the board.
Board
Dark theme, Select
Priority
Urgent needs an owner.
StatusPick a status that fits the board.
Board
High contrast theme, Select
Priority
Urgent needs an owner.
StatusPick a status that fits the board.
Board
UsageLink to the section Usage
import { Select } from '@skribly/ui/forms'<Select label="Priority" placeholder="Choose a priority"
items={[{ id: 'low', label: 'Low' }, { id: 'high', label: 'High' }]} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Space, Enter or the arrow keys open the list; typing a letter jumps to an option, also while closed.
- The chosen option has a check mark and bold text, not only a colour.
- Disabled options stay in the list and are skipped.
- The list is as wide as the trigger and never wider than the screen.
This demo runs through axe in all three themes on every test run. See what the tests check.