Listbox React component
An always-open list for picking one or several options: a search box that filters as you type, sticky group headings, avatars and descriptions, a highlight that follows the pointer or keyboard, checks that draw in, and type-ahead to jump by name.
When to use the Listbox component
Use Listbox when the options should stay visible while people choose: assigning people, picking tags or categories, choosing items in a side panel or settings page.
For a compact field in a form, use Select, Combobox or Multi Select, which keep the list in a popover.
Installation
Add the Listbox component to your project with the shadcn CLI. It lands in components/listbox.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/listbox.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<Listbox /> accepts 11 props, all optional.
| Prop | Type | Default |
|---|---|---|
| options | { value: string; label: string; description?: string; group?: string; avatar?: string; disabled?: boolean }[] | DEFAULT_OPTIONS |
| multiple | boolean | true |
| value | string[] | — |
| defaultValue | string[] | ["maya", "leo"] |
| onValueChange | (value: string[]) => void | — |
| filter | boolean | true |
| filterPlaceholder | string | "Search people" |
| label | string | "Assign to" |
| height Height of the scrolling list. | number | 300 |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- options{ value: string; label: string; description?: string; group?: string; avatar?: string; disabled?: boolean }[]Default: DEFAULT_OPTIONS
- multiplebooleanDefault: true
- valuestring[]
- defaultValuestring[]Default: ["maya", "leo"]
- onValueChange(value: string[]) => void
- filterbooleanDefault: true
- filterPlaceholderstringDefault: "Search people"
- labelstringDefault: "Assign to"
- height
Height of the scrolling list.
numberDefault: 300 - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- Can people search?
- Yes. The search box filters by name and description as you type, and arrow keys work from inside it.
- Does it support groups?
- Give options a group and they're listed under sticky headings in the order the groups first appear.
- How does keyboard selection work?
- Arrow keys move the highlight, Space or Enter toggles, Home and End jump to the ends, and typing letters jumps to a matching name.
