Tabs

Boolean

Determines whether the content element should remain visible even when the `open` state is `false`. If this prop is set to `true`, the `hidden` prop and the `display: none` style will not be applied, unless explicitly set otherwise. This prop is particularly useful when using third-party animation libraries such as Framer Motion or React Spring, where the element needs to be visible for exit animations to work. Live examples: - [Dialog with Framer Motion](https://ariakit.org/examples/dialog-framer-motion) - [Menu with Framer Motion](https://ariakit.org/examples/menu-framer-motion) - [Tooltip with Framer Motion](https://ariakit.org/examples/tooltip-framer-motion) - [Dialog with details & summary](https://ariakit.org/examples/dialog-details)

string

The id of the tab that controls this panel. By default, this value will be inferred based on the order of the tabs and the panels. Live examples: - [Tab with React Router](https://ariakit.org/examples/tab-react-router)

Boolean

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`](https://ariakit.org/reference/focusable#accessiblewhendisabled) prop to make disabled elements still accessible via keyboard. Live examples: - [Submenu](https://ariakit.org/examples/menu-nested)

Boolean

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](https://ariakit.org/components/focusable) elements within a [Dialog](https://ariakit.org/components/dialog) component, establishing the initial focus as the dialog opens. Live examples: - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Dialog with React Router](https://ariakit.org/examples/dialog-react-router) - [Nested Dialog](https://ariakit.org/examples/dialog-nested)

Boolean

Determines if [Focusable](https://ariakit.org/components/focusable) features should be active on non-native focusable elements. **Note**: This prop only turns off the additional features provided by the [Focusable](https://ariakit.org/components/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`](https://ariakit.org/reference/focusable#autofocus), [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled), [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible), etc.

Boolean

Indicates whether the element should be focusable even when it is [`disabled`](https://ariakit.org/reference/focusable#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](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).

BivariantCallback<(event: SyntheticEvent<Element, Event>) => void>

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: - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)

Boolean

Whether the item should be registered to the store.

(props: Item) => Item

A memoized function that returns props that will be passed along with the item when it gets registered to the store. @example ```jsx const store = useCollectionStore(); const getItem = useCallback((item) => ({ ...item, custom: true }), []); <CollectionItem store={store} getItem={getItem} /> ```