Ariakit
/

API Reference

Button

Checkbox

Collection

Combobox

useComboboxContextReturns the combobox store from the nearest combobox container.
useComboboxStoreCreates a combobox store.
ComboboxRenders a combobox input.
ComboboxCancelRenders a combobox cancel button that clears the combobox input when clicked.
ComboboxDisclosureRenders a combobox disclosure button that toggles the combobox popover visibility when clicked.
ComboboxGroupRenders a combobox group.
ComboboxGroupLabelRenders a label in a combobox group. This component should be wrapped with ComboboxGroup so the aria-labelledby is correctly set on the combobox group element.
ComboboxItemRenders a combobox item inside a ComboboxList or ComboboxPopover components. The role prop will be automatically set based on the list's own role prop. For example, if the list role is set to listbox (default), the ComboboxItem role will be set to option.
ComboboxItemValueRenders a value element inside a combobox item. The value will be split into span elements. The portions of the value that correspond to the store value will have a data-user-value attribute. The other portions will have a data-autocomplete-value attribute.
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). The aria-labelledby prop is set to the combobox input element's id by default.
ComboboxProviderProvides a combobox store to Combobox components.
ComboboxRowRenders a combobox row.
ComboboxSeparatorRenders a separator element for combobox items

Command

Composite

Dialog

Disclosure

FocusTrap

Focusable

Form

useFormContextReturns the form store from the nearest form container.
useFormStoreCreates a form store.
FormRenders a form element.
FormCheckboxRenders a checkbox as a form field.
FormDescriptionRenders a description element for a form field.
FormErrorRenders an element that displays an error message. The children will be automatically set to the error message set on the store.
FormFieldRenders a form field. 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.
FormGroupRenders a form group.
FormGroupLabelRenders a label in a form group. This component must be wrapped with FormGroup so the aria-labelledby prop is properly set on the form group element.
FormInputRenders a form input. Unlike FormField, this component passes the value and onChange props down to the underlying element that can be a native input, select or textarea elements.
FormLabelRenders a label for a form field. If the field is not a native input, select or textarea element, the component will render a span element. Instead of relying on the htmlFor prop, it'll rely on the aria-labelledby attribute on the form field. Clicking on the label will move focus to the field even if it's 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 in a form.
FormRadioGroupRenders a radio group in a form.
FormRemoveRenders a button that will remove an item from an array field in the form when clicked.
FormResetRenders a reset buttom in a form.
FormSubmitRenders a submit buttom in a form.

Group

Heading

Hovercard

useMenuBarStoreDeprecated: Use useMenubarStore instead.
useMenuBarContextDeprecated: Use useMenubarContext instead.
useMenuContextReturns the menu store from the nearest menu container.
useMenuStoreCreates a menu store.
MenuRenders a dropdown menu element.
MenuArrowRenders an arrow inside the menu element.
MenuBarDeprecated: Use Menubar instead.
MenuBarProviderDeprecated: Use MenubarProvider instead.
MenuButtonRenders a menu button that triggers a Menu component. Usually, this is rendered as a native button element, but if it's a submenu button rendered as a menu item inside another menu, it'll be rendered as a div.
MenuButtonArrowRenders an arrow pointing to the menu position, usually inside a MenuButton.
MenuDescriptionRenders a description in a menu. This component must be wrapped with Menu component so the aria-describedby prop is properly set on the menu element.
MenuDismissRenders a button that hides a menu.
MenuGroupRenders a menu group inside a menu.
MenuGroupLabelRenders a label in a menu group. This component must be wrapped with MenuGroup so the aria-labelledby prop is properly set on the menu group element.
MenuHeadingRenders a heading in a menu. This component must be wrapped with Menu so the aria-labelledby prop is properly set on the menu element.
MenuItemRenders a menu item.
MenuItemCheckRenders a checkmark inside a MenuItemCheckbox or MenuItemRadio components. This component must be wrapped with one of those components or the checked prop must be explicitly passed to the component.
MenuItemCheckboxRenders a menu item checkbox inside a menu.
MenuItemRadioRenders a menu item radio inside a menu.
MenuListRenders a menu list element.
MenuProviderProvides a menu store to Menu components.
MenuSeparatorRenders a separator for menu items.

Popover

Portal

Radio

Role

Select

Separator

Tab

Toolbar

Tooltip

VisuallyHidden