- Docs
- components
- Select
Select
A Select displays a collapsible list of options and allows a user to select one of them.
A select can be built using the <select> and <option> HTML elements, but this is not possible to style consistently cross browser, especially the options. Select helps achieve accessible select components that can be styled as needed without compromising on high quality interactions.
Installation
npx shadcn@latest add https://backchanel.com/default/selectComposed Components
A Select uses the following components, which may also be used standalone or reused in other components.
Label
A label provides context for an element.
Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Popover
A popover is an overlay element positioned relative to a trigger.
ListBox
A listbox displays a list of options and allows a user to select one or more of them.
Reusable Wrapper - Example
If you will use a Select in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper JollySelect. This wrapper serves as an excellent starting point for use throughout your codebase.
The JollySelect component extends the props of React Aria Select and adds:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the select |
description | string | undefined | undefined | Description text for the select |
errorMessage | string | ((validation: AriaValidationResult) => string) | undefined | undefined | Error message to display or function to generate it |
items | Iterable<T> | undefined | undefined | Items to display in the select |
children | React.ReactNode | ((item: T) => React.ReactNode) | Required | Content for the select options |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.
Examples
Basic
Content
Select follows the Collection Components API, accepting both static and dynamic collections. The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time.
Links
Client Side Routing
The <SelectItem> 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.
Sections
Static
Dynamic
Text Slots
Validation
Description
Disabled
A Select can be fully disabled using the isDisabled prop.
Select supports marking items as disabled using the disabledKeys prop. 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 guide for more details.