- Docs
- Select
Select
A select displays a collapsible list of options and allows a user to select one of them.
Installation
Copy and paste the following code into your project.
Loading...Update the import paths to match your project setup.
Usage
Basic
Links
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 Items
Dynamic Items
Sections used with dynamic items are populated from a hierarchical data structure. Similarly to the props on Select, <SelectSection> takes an array of data using the items prop.
If the section also has a header, the SelectCollection component can be used to render the child items.
Disabled
Select supports marking items as disabled using the disabledKeys prop.
Each key in this list corresponds with the id prop passed to the SelectItem component, or automatically derived from the values passed to the items prop.
See Collections for more details.
Disabled items are not focusable, selectable, or keyboard navigable.