Ariakit
/

All things Select

Components

Examples

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.
SelectValueRenders the current value state in the select store.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue