Ariakit
/

API Reference

Button

Checkbox

Collection

Combobox

useComboboxContextReturns the combobox store from the nearest combobox container.
useComboboxStoreCreates a combobox store to control the state of Combobox components.
ComboboxRenders a combobox input element that can be used to filter a list of items.
ComboboxCancelRenders a combobox cancel button that clears the combobox input value when clicked.
ComboboxDisclosureRenders a combobox disclosure button that toggles the ComboboxPopover element's visibility when clicked.
ComboboxGroupRenders a group for ComboboxItem elements. Optionally, a ComboboxGroupLabel can be rendered as a child to provide a label for the group.
ComboboxGroupLabelRenders a label in a combobox group. This component should be wrapped with ComboboxGroup so the aria-labelledby is correctly set on the group element.
ComboboxItemRenders a combobox item inside ComboboxList or ComboboxPopover components.
ComboboxItemCheckRenders a checkmark icon when the checked prop is true. The icon can be overridden by providing a different one as children.
ComboboxItemValueRenders a value element inside a ComboboxItem. The value will be split into span elements. The portions of the value that correspond to the combobox value will have a data-user-value attribute. The other portions will have a data-autocomplete-value attribute.
ComboboxLabelRenders a label for the Combobox component.
ComboboxListRenders a combobox list. The role prop is set to listbox by default, but can be overriden by any other valid combobox popup role (listbox, menu, tree, grid or dialog).
ComboboxPopoverRenders a combobox popover. The role prop is set to listbox by default, but can be overriden by any other valid combobox popup role (listbox, menu, tree, grid or dialog).
ComboboxProviderProvides a combobox store that controls the state of Combobox components.
ComboboxRowRenders a combobox row that allows two-dimensional arrow key navigation. ComboboxItem elements wrapped within this component will automatically receive a rowId prop.
ComboboxSeparatorDeprecated: Use ComboboxGroup with CSS borders instead.

Command

Composite

Dialog

Disclosure

FocusTrap

Focusable

Form

useFormContextReturns the form store from the nearest form container.
useFormStoreCreates a form store to control the state of Form components.
FormRenders a form element and provides a form store to its controls.
FormCheckboxRenders a checkbox input as a form control, representing a boolean, string, number, or array value.
FormControlAbstract component that renders a form control. Unlike FormInput, this component doesn't automatically pass the value and onChange props down to the underlying element. This is so we can use it not only for native form elements but also for custom components whose value is not controlled by the native value and onChange props.
FormDescriptionRenders a description element for a form field, which will automatically receive an aria-describedby attribute pointing to this element.
FormErrorRenders an element that shows an error message. The children will automatically display the error message defined in the store.
FormFieldDeprecated: This component has been renamed to FormControl. The API remains the same.
FormGroupRenders a group element for form controls. The FormGroupLabel component can be used inside this component so the aria-labelledby prop is properly set on the group element.
FormGroupLabelRenders a label in a form group. This component must be wrapped with the FormGroup or FormRadioGroup components so the aria-labelledby prop is properly set on the form group element.
FormInputRenders a form input. Unlike FormControl, this component passes the value and onChange props down to the underlying element that can be native input, select or textarea elements.
FormLabelRenders a label associated with a form field, even if the field is not a native input.
FormProviderProvides a form store to Form components.
FormPushRenders a button that will push items to an array value in the form store when clicked.
FormRadioRenders a radio button as a form control. This component must be wrapped in a FormRadioGroup along with other radio buttons sharing the same name.
FormRadioGroupRenders a group element for FormRadio elements. The FormGroupLabel component can be used inside this component so the aria-labelledby prop is properly set on the group element.
FormRemoveRenders a button that will remove an item from an array field in the form when clicked.
FormResetRenders a button that resets the form to its initial values, as defined by the defaultValues prop given to the form store.
FormSubmitRenders a native submit button inside a form. The button will be disabled while the form is submitting, but it will remain accessible to keyboard and screen reader users thanks to the accessibleWhenDisabled prop that's enabled by default.

Group

Heading

Hovercard

useMenuBarStoreDeprecated: Use useMenubarStore instead.
useMenuBarContextDeprecated: Use useMenubarContext instead.
useMenuContextReturns the menu store from the nearest menu container.
useMenuStoreCreates a menu store to control the state of Menu components.
MenuRenders a dropdown menu element that's controlled by a MenuButton component.
MenuArrowRenders an arrow element inside a Menu component that points to its MenuButton.
MenuBarDeprecated: Use Menubar instead.
MenuBarProviderDeprecated: Use MenubarProvider instead.
MenuButtonRenders a menu button that toggles the visibility of a Menu component when clicked or when using arrow keys.
MenuButtonArrowDisplays an arrow within a MenuButton, pointing to the Menu position. It's typically based on the placement state from the menu store, but this can be overridden with the placement prop.
MenuDescriptionRenders a description in a menu. This component must be wrapped with a Menu component so the aria-describedby prop is properly set on the menu element.
MenuDismissRenders a button that hides a Menu when clicked.
MenuGroupRenders a group for MenuItem elements. Optionally, a MenuGroupLabel can be rendered as a child to provide a label for the group.
MenuGroupLabelRenders a label in a menu group. This component should be wrapped with MenuGroup so the aria-labelledby is correctly set on the group element.
MenuHeadingRenders a heading in a menu. This component must be wrapped within Menu so the aria-labelledby prop is properly set on the content element.
MenuItemRenders a menu item inside MenuList or Menu components.
MenuItemCheckRenders a checkmark icon when the checked prop is true. The icon can be overridden by providing a different one as children.
MenuItemCheckboxRenders a menuitemcheckbox element within a Menu component. The name prop must be provided to identify the field in the values state.
MenuItemRadioRenders a menuitemradio element within a Menu component. The name prop must be provided to identify the field in the values state.
MenuListRenders a menu list element. This is the primitive component used by the Menu component.
MenuProviderProvides a menu store to Menu components.
MenuSeparatorRenders a divider between MenuItem, MenuItemCheckbox, and MenuItemRadio elements.

Popover

Portal

Radio

Role

Select

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.
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.
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 select list element. This is the primitive component used by the SelectPopover component.
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.

Separator

Tab

Toolbar

Tooltip

VisuallyHidden