API Reference
Button
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
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
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
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.
Hovercard
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.
Menu
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.
Popover
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
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
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.
Toolbar
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.
Tooltip
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.