API Reference
Button
Checkbox
useCheckboxContextReturns the checkbox store from the nearest checkbox container.
useCheckboxStoreCreates a checkbox store to conveniently manage a checkbox value,
whether it's a string, number, boolean, or an array of strings or numbers.
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 checkmark icon when the
checked prop is
true. The icon can be overridden by providing a different one as children.
CheckboxProviderProvides a checkbox store for its descendants. This comes in handy when
creating a group of checkboxes that share the same state. CheckboxProvider
can efficiently manage the value of a checkbox, whether it's a single string,
number, or boolean value, or an array of such values.
Collection
useCollectionContextReturns the collection store from the nearest collection container.
useCollectionStoreCreates a collection store to control
Collection components.
CollectionRenders a simple wrapper for collection items. It accepts a 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 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 span element with the combobox item value as children. The value
is split into span elements. Portions of the value matching the user input
will have a
data-user-value
attribute, while the rest 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.
ComboboxValueRenders the current
value state in
the combobox store.
Command
Composite
useCompositeContextReturns the composite store from the nearest composite container.
useCompositeStoreCreates a composite store to control the state of
Composite components.
CompositeRenders a composite widget.
CompositeGroupRenders a group element for composite items. The
CompositeGroupLabel
component can be used inside this component so the aria-labelledby prop is
properly set on the group element.
CompositeGroupLabelRenders a label in a composite group. This component must be wrapped with
CompositeGroup so the
aria-labelledby prop is properly set on the 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.
CompositeItemRenders a focusable item as part of a composite widget. The tabindex
attribute is automatically managed by this component based on the
virtualFocus
option.
CompositeProviderProvides a composite store to
CompositeItem components.
CompositeRowRenders a row element for composite items that allows two-dimensional arrow
key navigation.
CompositeItem elements
wrapped within this component will automatically receive a
rowId prop.
CompositeSeparatorRenders a divider between
CompositeItem elements.
CompositeTypeaheadRenders a component that adds typeahead functionality to composite
components.
Dialog
useDialogContextReturns the dialog store from the nearest dialog container.
useDialogStoreCreates a dialog store to control the state of
Dialog components.
DialogRenders a dialog similar to the native dialog element that's rendered in a
portal by default.
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 toggles the visibility of a
Dialog component when clicked.
DialogDismissRenders a button that hides a
Dialog when clicked.
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 to control the state of
Disclosure components.
DisclosureRenders an element that controls the visibility of a
DisclosureContent
element.
DisclosureContentRenders an element that can be shown or hidden by a
Disclosure component.
DisclosureProviderProvides a disclosure store to
Disclosure components.
FocusTrap
FocusTrapRenders a focus trap element.
FocusTrapRegionRenders a wrapper element that traps the focus inside it when the
enabled prop is
true.
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
GroupRenders a group element. Optionally, a
GroupLabel can be rendered as
a child to provide a label for the group.
GroupLabelRenders a label in a group. This component should be wrapped with a
Group so the aria-labelledby
prop is correctly set on the group element.
Heading
HeadingRenders a heading element. The element type (or the aria-level attribute,
if the element type is not a native heading) is determined by the context
level provided by the closest
HeadingLevel ancestor.
HeadingLevelA component that sets the heading level for its 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 to control the state of
Hovercard components.
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 inside a
Hovercard component that points
to the anchor element.
HovercardDescriptionRenders a description in a hovercard. This component must be wrapped within
Hovercard so the
aria-describedby prop is properly set on the content 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 when clicked.
HovercardHeadingRenders a heading in a hovercard. This component must be wrapped within
Hovercard so the
aria-labelledby prop is properly set on the content 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 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.
Menubar
useMenubarStoreCreates a menubar store to control the state of
Menubar components.
useMenubarContextReturns the menubar store from the nearest menubar container.
MenubarRenders a menubar that may contain a group of
MenuItem elements 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 to control the state of
Popover components.
PopoverRenders a popover element that's automatically positioned relative to an
anchor element.
PopoverAnchorRenders an element that acts as the anchor for the popover. The
Popover component will be
positioned in relation to this element.
PopoverArrowRenders an arrow inside a Popover
component pointing to the anchor element.
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 component 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 React
Portal.
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 to control the state of
Radio components.
RadioRenders a radio button element that's typically wrapped in a
RadioGroup component.
RadioGroupRenders a radiogroup element that
manages a group of Radio elements.
RadioProviderProvides a radio store to Radio
components.
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.
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.
Separator
Store
Tab
useTabContextReturns the tab store from the nearest tab container.
useTabStoreCreates a tab store to control the state of
Tab components.
TabRenders a tab element inside a
TabList wrapper.
TabListRenders a composite tab list wrapper for
Tab elements.
TabPanelRenders a tab panel element that's controlled by a
Tab component.
TabProviderProvides a tab store to Tab components.
Toolbar
useToolbarContextReturns the toolbar store from the nearest toolbar container.
useToolbarStoreCreates a toolbar store to control the state of
Toolbar components.
ToolbarRenders a toolbar element that groups interactive elements together.
ToolbarContainerRenders a toolbar item that may contain interactive widgets inside.
ToolbarInputDeprecated: Use <ToolbarItem render={<input />}> instead.
ToolbarItemRenders an interactive element inside a
Toolbar.
ToolbarProviderProvides a toolbar store to Toolbar
components.
ToolbarSeparatorRenders a divider between
ToolbarItem elements.
Tooltip
useTooltipContextReturns the tooltip store from the nearest tooltip container.
useTooltipStoreCreates a tooltip store to control the state of
Tooltip components.
TooltipRenders a tooltip element that visually describes a
TooltipAnchor when it
receives focus or is hovered.
TooltipAnchorRenders a reference element for a
Tooltip, which is triggered by
focusing or hovering over the anchor.
TooltipArrowRenders an arrow inside a Tooltip
pointing to the anchor element.
TooltipProviderProvides a tooltip store to Tooltip
components.