Forms and settings
Select
components/ui/selectA single-choice listbox with type-ahead.
Select live demo
Notify me about
- Every message
- Mentions only
- Nothing
Craft notes
- A real listbox: arrows move, a letter jumps ahead, Enter picks and Escape closes
- The active option shows a 2px bar as well as a fill, so focus never relies on color
- Opening and closing use the menu puff; choosing plays a crisp option click
Play it
Open it with Space, type M to jump to Mentions only, and press Enter.
Variants
Every prop combination the component supports. The chip on each card is the exact props it passes.
Default
label="Notify me about"Label, value and three options.
Notify me about- Every message
- Mentions only
- Nothing
With hints
options={[{ label, hint }]}A second line explains each option.
Notify me about- Every messageEach new message plays notify
- Mentions onlyPlays mention when someone tags you
- NothingSilent, badges only
Hidden label
hideLabelVisually hidden, still read by screen readers.
Notify me about- Every message
- Mentions only
- Nothing
Disabled
disabledVisible but not available.
Notify me about- Every message
- Mentions only
- Nothing