Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn always-visible list of options with one tab stop, aria-activedescendant navigation, typeahead, grouping and single or multiple selection.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when the choices should stay visible: role pickers, notification channels, a filter list in a sidebar. It is the listbox pattern on its own, with no popup.
Do not use it as a dropdown (use select) or for long searchable lists (use a combobox). Do not put controls inside options.
| Prop | Type | Default | Description |
|---|---|---|---|
options | { value, label, disabled?, group? }[] | - | The options. Options with the same group in a row are grouped. |
multiple | boolean | false | Allow several selected. |
value / defaultValue | string | null | string[] | - | Controlled or initial selection. |
onValueChange | (value) => void | - | A string or null, or an array in multiple mode. |
aria-label | string | - | Accessible name. |
aria-activedescendant, and aria-multiselectable is set for multiple.aria-disabled; groups use role="group" with a label.| Key | Action |
|---|---|
| ArrowDown / ArrowUp | move the highlight |
| Home / End | first / last option |
| Space or Enter | select (toggle in multiple mode) |
| Ctrl/Cmd+A | select all (multiple) |
| Type letters | jump to a matching option |
The component ships a Testing Library test (listbox.test.tsx) that covers activedescendant, skipping disabled options, single and multiple selection, Ctrl+A, typeahead, pointer and groups.