API Reference

Button

ButtonRenders an accessible button element. If the underlying element is not a native button, this component will pass additional attributes to make sure it's accessible.

Checkbox

useCheckboxContextReturns the checkbox store from the nearest checkbox container.

useCheckboxStoreCreates a checkbox store.

CheckboxRenders an accessible checkbox element. If the underlying element is not a native checkbox, this component will pass additional attributes to make sure it's accessible.

CheckboxCheckRenders a check mark icon, usually inside a Checkbox component.

CheckboxProviderProvides a checkbox store to its descendants. This is useful to create a group of checkboxes that share the same store.

Collection

useCollectionContextReturns the collection store from the nearest collection container.

useCollectionStoreCreates a collection store.

CollectionRenders a simple wrapper for collection items. It receives the collection store through the store prop and provides context for CollectionItem components.

CollectionItemRenders an item in a collection. The collection store can be passed explicitly through the store prop or implicitly through the parent Collection component.

CollectionProviderProvides a collection store to CollectionItem components.

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

CommandRenders a clickable element, which is a button by default, and inherits features from the Focusable component.

Composite

useCompositeContextReturns the composite store from the nearest composite container.

useCompositeStoreCreates a composite store.

CompositeRenders a composite widget.

CompositeGroupRenders a group element for composite items.

CompositeGroupLabelRenders a label in a composite group. This component must be wrapped with CompositeGroup so the aria-labelledby prop is properly set on the composite group element.

CompositeHoverRenders an element in a composite widget that receives focus on mouse move and loses focus to the composite base element on mouse leave. This should be combined with the CompositeItem component, the useCompositeItem hook or any component/hook that uses them underneath.

CompositeItemRenders a composite item.

CompositeProviderProvides a composite store to CompositeItem components.

CompositeRowRenders a composite row. Wrapping CompositeItem elements within CompositeRow will create a two-dimensional composite widget, such as a grid.

CompositeSeparatorRenders a separator for composite items.

CompositeTypeaheadRenders a component that adds typeahead functionality to composite components.

Dialog

useDialogContextReturns the dialog store from the nearest dialog container.

useDialogStoreCreates a dialog store.

DialogRenders a dialog element.

DialogDescriptionRenders a description in a dialog. This component must be wrapped with Dialog so the aria-describedby prop is properly set on the dialog element.

DialogDisclosureRenders a button that shows/hides a dialog.

DialogDismissRenders a button that hides a dialog.

DialogHeadingRenders a heading in a dialog. This component must be wrapped with Dialog so the aria-labelledby prop is properly set on the dialog element.

DialogProviderProvides a dialog store to Dialog components.

Disclosure

useDisclosureContextReturns the disclosure store from the nearest disclosure container.

useDisclosureStoreCreates a disclosure store.

DisclosureRenders an element that controls the visibility of a disclosure content element.

DisclosureContentRenders an element that can be shown or hidden.

DisclosureProviderProvides a disclosure store to Disclosure components.

FocusTrap

FocusTrapRenders a focus trap element.

FocusTrapRegionRenders a focus trap region element.

Focusable

FocusableRenders a focusable element. When this element gains keyboard focus, it gets a data-focus-visible attribute and triggers the onFocusVisible prop.

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

GroupRenders a group element.

GroupLabelRenders a label in a group. This component must be wrapped with Group so the aria-labelledby prop is properly set on the group element.

Heading

HeadingRenders a heading element. The element type (or the aria-level prop, if the element type is not a native heading) is determined by the context level provided by the parent HeadingLevel component.

HeadingLevelA component that sets the heading level for the children. It doesn't render any HTML element, just sets the level prop on the context.

useHovercardContextReturns the hovercard store from the nearest hovercard container.

useHovercardStoreCreates a hovercard store.

HovercardRenders a hovercard element, which is a popover that's usually made visible by hovering the mouse cursor over a HovercardAnchor.

HovercardAnchorRenders an anchor element that will open a Hovercard popup on hover.

HovercardArrowRenders an arrow element in a hovercard.

HovercardDescriptionRenders a description in a hovercard. This component must be wrapped within Hovercard so the aria-describedby prop is properly set on the hovercard element.

HovercardDisclosureRenders a hidden disclosure button that will be visible when the HovercardAnchor receives keyboard focus. The user can then navigate to the button to open the hovercard when using the keyboard.

HovercardDismissRenders a button that hides a hovercard.

HovercardHeadingRenders a heading in a hovercard. This component must be wrapped within Hovercard so the aria-labelledby prop is properly set on the hovercard element.

HovercardProviderProvides a hovercard store to Hovercard components.

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.

Menubar

useMenubarStoreCreates a menubar store.

useMenubarContextReturns the menubar store from the nearest menubar container.

MenubarRenders a menu bar that may contain a group of menu items that control other submenus.

MenubarProviderProvides a menubar store to Menubar components.

usePopoverContextReturns the popover store from the nearest popover container.

usePopoverStoreCreates a popover store.

PopoverRenders a popover element.

PopoverAnchorRenders an element that will serve as the popover's anchor. The popover will be positioned relative to this element.

PopoverArrowRenders an arrow inside a Popover component.

PopoverDescriptionRenders a description in a popover. This component must be wrapped with Popover so the aria-describedby prop is properly set on the popover element.

PopoverDisclosureRenders a button that controls the visibility of the popover when clicked.

PopoverDisclosureArrowRenders an arrow pointing to the popover position. It's usually rendered inside the PopoverDisclosure component.

PopoverDismissRenders a button that hides a Popover component when clicked.

PopoverHeadingRenders a heading in a popover. This component must be wrapped with Popover so the aria-labelledby prop is properly set on the popover element.

PopoverProviderProvides a popover store to Popover components.

Portal

PortalRenders an element using ReactDOM.createPortal.

PortalContextStores the element that will contain the portal. By default, it will be the body of the document.

Radio

useRadioContextReturns the radio store from the nearest radio container.

useRadioStoreCreates a radio store.

RadioRenders a radio button element.

RadioGroupRenders a radio group element.

RadioProviderProvides a radio store to Radio components.

Role

RoleRenders an abstract element that supports the render prop a wrapElement prop that can be used to wrap the underlying element with React Portal, Context or other component types.

Select

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.

Separator

SeparatorRenders a separator element.

Tab

useTabContextReturns the tab store from the nearest tab container.

useTabStoreCreates a tab store.

TabRenders a tab element. The underlying element must be wrapped in a TabList component.

TabListRenders a tab list element.

TabPanelRenders a tab panel element.

TabProviderProvides a tab store to Tab components.

useToolbarContextReturns the toolbar store from the nearest toolbar container.

useToolbarStoreCreates a toolbar store.

ToolbarRenders a toolbar element that groups interactive elements together.

ToolbarContainerRenders a container for interactive widgets inside toolbar items.

ToolbarInputRenders an input as a toolbar item.

ToolbarItemRenders an interactive element in a toolbar.

ToolbarProviderProvides a toolbar store to Toolbar components.

ToolbarSeparatorRenders a separator for toolbar items.

useTooltipContextReturns the tooltip store from the nearest tooltip container.

useTooltipStoreCreates a tooltip store.

TooltipRenders a tooltip element.

TooltipAnchorRenders an element that will be described by a Tooltip component. This component will also be used as the reference to position the tooltip on the screen.

TooltipArrowRenders an arrow inside a Tooltip component.

TooltipProviderProvides a tooltip store to Tooltip components.

VisuallyHiddenRenders an element that's visually hidden, but still accessible to screen readers.