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 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.
API Reference
useSelectContextReturns the select store from the nearest select container.
useSelectStoreCreates a select store.
SelectRenders a select button.
SelectArrowRenders an arrow pointing to the select popover position. It's usually
rendered inside the Select
component.
SelectGroupRenders a select 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.
SelectItemRenders a select item inside a
SelectList or
SelectPopover.
SelectItemCheckRenders a checkmark inside a SelectItem component. This component must be
wrapped with SelectItem or the checked prop must be explicitly passed to
the component.
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 select list. 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).
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.
SelectSeparatorRenders a separator element for select items.