Code examples
Optional Props
accessibleWhenDisabled
boolean | undefined
Indicates whether the element should be focusable even when it is
disabled
.
This is important when discoverability is a concern. For example:
A toolbar in an editor contains a set of special smart paste functions that are disabled when the clipboard is empty or when the function is not applicable to the current content of the clipboard. It could be helpful to keep the disabled buttons focusable if the ability to discover their functionality is primarily via their presence on the toolbar.
Learn more on Focusability of disabled controls.
autoFocus
boolean | undefined = false
Automatically focuses the element upon mounting, similar to the native
autoFocus
prop. This addresses an issue where the element with the native
autoFocus
attribute might receive focus before React effects are
executed.
The autoFocus
prop can also be used with
Focusable elements within a
Dialog component, establishing the
initial focus as the dialog opens.
Live examples
composite
boolean | undefined = true
Whether the component should behave as a composite widget. This prop should
be set to false
when combining different composite widgets where only one
should behave as such.
disabled
boolean | undefined = false
Determines if the element is disabled. This sets the aria-disabled
attribute accordingly, enabling support for all elements, including those
that don't support the native disabled
attribute.
This feature can be combined with the
accessibleWhenDisabled
prop to make disabled elements still accessible via keyboard.
Live examples
focusable
boolean | undefined = true
Determines if Focusable features should be active on non-native focusable elements.
Note: This prop only turns off the additional features provided by the
Focusable component. Non-native
focusable elements will lose their focusability entirely. However, native
focusable elements will retain their inherent focusability, but without
added features such as improved
autoFocus
,
accessibleWhenDisabled
,
onFocusVisible
,
etc.
focusLoop
boolean | Orientation = false
Determines how the focus behaves when the user reaches the end of the composite widget.
On one-dimensional composites:
true
loops from the last item to the first item and vice-versa.horizontal
loops only iforientation
ishorizontal
or not set.vertical
loops only iforientation
isvertical
or not set.If
includesBaseElement
is set totrue
(oractiveId
is initially set tonull
), the composite element will be focused in between the last and first items.
On two-dimensional composites (when using CompositeRow
):
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 totrue
(oractiveId
is initially set tonull
), vertical loop will have no effect as moving down from the last row or up from the first row will focus the composite element.If
focusWrap
matches the value offocusLoop
, 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.
focusOnMove
boolean | undefined = true
Whether the active composite item should receive focus when store.move
is
called.
moveOnKeyPress
BooleanOrCallback<React.KeyboardEvent<HTMLElement>> | undefined = true
Whether the composite widget should move focus to an item when pressing arrow keys.
onFocusVisible
BivariantCallback<(event: React.SyntheticEvent<HTMLElement, Event>) => void> | undefined
Custom event handler invoked when the element gains focus through keyboard
interaction or a key press occurs while the element is in focus. This is a
programmatic equivalent of the data-focus-visible
attribute.
Live examples
orientation
Orientation = "both"
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.
rtl
boolean = false
Determines how the next
and previous
functions will behave. If rtl
is
set to true
, they will be inverted. This only affects the composite
widget behavior. You still need to set dir="rtl"
on HTML/CSS.
store
MenubarStore | undefined
Object returned by the
useMenubarStore
hook.
If not provided, the closest
MenubarProvider
component context will be used. If the component is not wrapped in a
MenubarProvider
component, an internal store will be used.
virtualFocus
boolean = false
If enabled, the composite element will act as an
aria-activedescendant
Live examples
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on API Reference.