All things Select
Components
Examples
Form with SelectCombining Form and Select to create an accessible custom select widget that works with the browser's built-in validation and native form submission.
Animated SelectAnimating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.
Select with ComboboxCombining Select and Combobox to create a dropdown with a search field that can be used to filter items.
Select with Combobox and TabsAbstracting Select to work alongside Combobox and Tab components, presenting a searchable, tabbed dropdown.
Select GridUsing Select with SelectPopover rendered with the grid role to create a bidimensional list of selectable items.
SelectGroupSeparating Select items into groups using the SelectGroup and SelectGroupLabel components.
Select with custom itemsRendering Select with a custom styled value and SelectItem's children.
Multi-SelectAllowing the Select component to select multiple values by passing an array to the defaultValue prop on the SelectProvider component.
Toolbar with SelectRendering Select as a ToolbarItem inside a Toolbar.
Select with Next.js App RouterControlling the value of a Select component via the URL using the Next.js App Router and React.useOptimistic to ensure a responsive and accessible UI.
API Reference
useSelectContextReturns the select store from the nearest select container.
useSelectStoreCreates a select store to control the state of
Select components.
SelectRenders a custom select element that controls the visibility of either a
SelectList or a
SelectPopover component.
SelectArrowRenders an arrow pointing to the select popover position. It's usually
rendered inside the Select
component.
SelectDismissRenders a button that hides a
SelectPopover component
when clicked.
SelectGroupRenders a group for SelectItem
elements. Optionally, a
SelectGroupLabel can be
rendered as a child to provide a label for the group.
SelectGroupLabelRenders a label in a select group. This component must be wrapped with
SelectGroup so the
aria-labelledby prop is properly set on the select group element.
SelectHeadingRenders a heading element that serves as a label for
SelectPopover and
SelectList components.
SelectItemRenders a select item inside a
SelectList or
SelectPopover.
SelectItemCheckRenders a checkmark icon when the
checked prop is
true. The icon can be overridden by providing a different one as children.
SelectLabelRenders a label for the Select
component. Since it's not a native select element, we can't use the native
label element. This component will move focus and click on the
Select component when clicked.
SelectListRenders a wrapper for
SelectItem elements. This
component may be rendered within a
SelectPopover component if
there are other non-item elements inside the popover.
SelectPopoverRenders a select popover. The role attribute is set to listbox by
default, but can be overriden by any other valid select popup role
(listbox, menu, tree, grid or dialog).
SelectProviderProvides a select store to Select
components.
SelectRowRenders a select row that allows two-dimensional arrow key navigation.
SelectItem elements wrapped
within this component will automatically receive a
rowId prop.
SelectSeparatorDeprecated: Use SelectGroup
with CSS borders instead.