Ariakit
/

All things Select

Components

SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.

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.