The current active item id. The active item is the element within the
composite widget that has either DOM or virtual focus (in case
virtualFocus
is enabled).
null represents the base composite element (the one with a composite
role). Users will be able to
navigate out of it using arrow keys.
If activeId is initially set to null, the
includesBaseElement
prop will also default to true, which means the base composite element
itself will have focus and users will be able to navigate to it using
arrow keys.
The composite item id that should be active by default when the composite
widget is rendered. If null, the composite element itself will have focus
and users will be able to navigate to it using arrow keys. If undefined,
the first enabled item will be focused.
The initial value of the
selectedValue
state. This can be a string or an array of strings. If it's an array, the
combobox is considered
multi-selectable.
A reference to another disclosure store that controls another disclosure
component to keep them in sync. Element states like contentElement and
disclosureElement won't be synced. For that, use the
store prop
instead.
Determines how the focus behaves when the user reaches the end of the
composite widget.
On one-dimensional composite widgets:
true loops from the last item to the first item and vice-versa.
horizontal loops only if
orientation
is horizontal or not set.
vertical loops only if
orientation
is vertical or not set.
If
includesBaseElement
is set to true (or
activeId
is initially set to null), the composite element will be focused in
between the last and first items.
On two-dimensional composite widgets (when using
CompositeRow or explicitly
passing a rowId
prop to composite items):
true loops from the last row/column item to the first item in the same
row/column and vice-versa. If it's the last item in the last row, it
moves to the first item in the first row and vice-versa.
horizontal loops only from the last row item to the first item in the
same row.
vertical loops only from the last column item to the first item in the
column row.
If
includesBaseElement
is set to true (or
activeId
is initially set to null), vertical loop will have no effect as moving
down from the last row or up from the first row will focus on the
composite element.
If
focusWrap
matches the value of focusLoop, it'll wrap between the last item in the
last row or column and the first item in the first row or column and
vice-versa.
If enabled, moving to the next item from the last one in a row or column
will focus on the first item in the next row or column and vice-versa.
true wraps between rows and columns.
horizontal wraps only between rows.
vertical wraps only between columns.
If
focusLoop
matches the value of focusWrap, it'll wrap between the last item in the
last row or column and the first item in the first row or column and
vice-versa.
Indicates if the composite base element (the one with a composite
role) should be part of the focus
order when navigating with arrow keys. In other words, moving to the
previous element when the first item is in focus will focus on the
composite element itself. The same applies to the last item when moving to
the next element.
Lists all items along with their metadata. This state is automatically
updated when an item is registered or unregistered using the
registerItem
function.
Defines the orientation of the composite widget. If the composite has a
single row or column (one-dimensional), the orientation value determines
which arrow keys can be used to move focus:
both: all arrow keys work.
horizontal: only left and right arrow keys work.
vertical: only up and down arrow keys work.
It doesn't have any effect on two-dimensional composites.
Whether to reset the value when the combobox popover closes. This prop is
automatically set to true by default if the combobox supports multiple
selections. In other words, if the
selectedValue
or
defaultSelectedValue
props are arrays.
The value(s) of the currently selected item(s). This can be a string or an
array of strings. If it's an array, the combobox is considered
multi-selectable.
A callback that's invoked when the
selectedValue
state changes, typically when the user selects an item. This can be used to
implement behavior like onSelect or onItemSelect.
If enabled, the composite element will act as an
aria-activedescendant
container instead of roving
tabindex.
DOM focus will remain on the composite element while its items receive
virtual focus.
In both scenarios, the item in focus will carry the
data-active-item
attribute.
Deprecated: Manually setting the animated prop is no longer necessary.
This will be removed in a future release.
Determines whether the content should animate when it is shown or hidden.
If true, the animating state will be true when the content is shown
or hidden and it will wait for a CSS animation/transition to end before
becoming false.
If it's set to a number, the animating state will be true when the
content is shown or hidden and it will wait for the number of
milliseconds to pass before becoming false.
Whether to reset the value when an item is selected. This prop is
automatically set to true by default if the combobox supports multiple
selections. In other words, if the
selectedValue
or
defaultSelectedValue
props are arrays.
A function that can be used to recompute the popover position. This is
useful when the popover anchor changes in a way that affects the popover
position.
Deprecated: Use setState("animating", false) instead.
Sets the animating state to false, which will automatically set the
mounted state to false if it was true. This means that the content
element can be safely unmounted.
A reference to another disclosure store that controls another disclosure
component to keep them in sync. Element states like contentElement and
disclosureElement won't be synced. For that, use the
store prop
instead.