Ariakit
/

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.

Live examples


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.

Note: For this prop to work, the focusable prop must be set to true, if it's not set by default.

Live examples


composite

boolean | undefined = true

Determines if the component should act as a composite widget. This prop needs to be set to false when merging various composite widgets where only one should function in that manner.

If disabled, this component will stop managing focus and keyboard navigation for its items and itself. Additionally, composite ARIA attributes won't be applied. These responsibilities should be taken over by another composite component.

Note: In most cases, this prop doesn't need to be set manually. For example, when composing Menu with Combobox or Select with Combobox, this prop will be set to false automatically on the Menu and SelectPopover components so the Combobox component can take over the composite widget responsibilities.

Live examples


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.

Note: For this prop to work, the focusable prop must be set to true, if it's not set by default.

Live examples


focusable

boolean | undefined

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 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.

Live examples


focusOnMove

boolean | undefined = true

Determines if the active composite item should receive focus (or virtual focus if the virtualFocus option is enabled) when moving through items. This typically happens when navigating through items with arrow keys, but it can also happen when calling the move method directly.

Unlike the composite prop, this option doesn't disable the entire composite widget behavior. It only stops this component from managing focus when navigating through items.

Note: If you want to control the behavior only when arrow keys are pressed, use the moveOnKeyPress prop instead.


moveOnKeyPress

BooleanOrCallback<React.KeyboardEvent<HTMLElement>> | undefined = true

Determines whether the composite widget should move focus to an item when arrow keys are pressed, given that the composite element is focused and there's no active item.

Note: To entirely disable focus moving within a composite widget, you can use the focusOnMove prop instead. If you want to control the behavior only when arrow keys are pressed, where focusOnMove may not be applicable, this prop must be set on composite items as well.

Code examples


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 the programmatic equivalent of the data-focus-visible attribute.

Note: For this prop to work, the focusable prop must be set to true, if it's not set by default.

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.


render

RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Check out the Composition guide for more details.


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 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.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue