- Docs
- components
- ListBox
ListBox
A ListBox displays a list of options and allows a user to select one or more of them.
This project is archived.
shadcn/ui now officially supports React Aria Components. Use shadcn/ui instead
A ListBox displays a list of options and allows a user to select one or more of them.
A listbox can be built using the <select> and <option> HTML elements, but this is not possible to style consistently cross browser. ListBox helps you build accessible listbox components that can be styled as needed.
Note: ListBox only handles the list itself. For a dropdown, see Select.
npx shadcn@latest add https://jollyui.dev/default/list-boximport { Item, ListBox } from "@/components/ui/list-box"<ListBox aria-label="Example list box">
<Item>Option 1</Item>
<Item>Option 2</Item>
<Item>Option 3</Item>
</ListBox>When selectionBehavior is set to "replace", clicking a row with the mouse replaces the selection with only that row. Using the arrow keys moves both focus and selection. To select multiple rows, modifier keys such as Ctrl, Cmd, and Shift can be used. On touch screen devices, selection always behaves as toggle since modifier keys may not be available.
By default, link items in a ListBox are not selectable, and only perform navigation when the user interacts with them. However, with the "replace" selection behavior, items will be selected when single clicking or pressing the Space key, and navigate to the link when double clicking or pressing the Enter key.
The <ListBoxItem> component works with frameworks and client side routers like Next.js, Remix and React Router.
As with other React Aria components that support links, this works via the RouterProvider component at the root of your app.
See the client side routing guide to learn how to set this up.
In dynamic collections, it may be more convenient to use the disabledKeys prop at the ListBox level instead of isDisabled on individual items. Each key in this list corresponds with the id prop passed to the ListBoxItem component, or automatically derived from the values passed to the items prop (see the Collections for more details). An item is considered disabled if its id exists in disabledKeys or if it has isDisabled.