JollyUI
  1. Docs
  2. components
  3. Select

Select

A select displays a collapsible list of options and allows a user to select one of them.

Docs

Installation

npx @sly-cli/sly add jolly-ui select

Note: Only the default style can be installed via CLI at the moment

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.

ComboBoxMeter