Tabs

Determines whether the content element should remain visible even when the [`open`](https://ariakit.org/reference/disclosure-provider#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)

When set to `true`, the content element will be unmounted and removed from the DOM when it's hidden. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Combobox with integrated filter](https://ariakit.org/examples/combobox-filtering-integrated) - [Textarea with inline Combobox](https://ariakit.org/examples/combobox-textarea) - [Standalone Popover](https://ariakit.org/examples/popover-standalone) - [Animated Select](https://ariakit.org/examples/select-animated) - [Multi-Select](https://ariakit.org/examples/select-multiple)

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](https://ariakit.org/guide/composition) guide for more details.

The [`id`](https://ariakit.org/reference/tab#id) of the tab controlling this panel. This connection is used to assign the `aria-labelledby` attribute to the tab panel and to determine if the tab panel should be visible. This link is automatically established by matching the order of [`Tab`](https://ariakit.org/reference/tab) and [`TabPanel`](https://ariakit.org/reference/tab-panel) elements in the DOM. If you're rendering a single tab panel, this can be set to a dynamic value that refers to the selected tab. Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Tab with React Router](https://ariakit.org/examples/tab-react-router) - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)

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. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Submenu](https://ariakit.org/examples/menu-nested) - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Context Menu](https://ariakit.org/examples/menu-context-menu)

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. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. 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)

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

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). Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

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`](https://ariakit.org/guide/styling#data-focus-visible) attribute. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)

The unique ID of the item. This will be used to register the item in the store and for the element's `id` attribute. If not provided, a unique ID will be automatically generated. Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Tab with React Router](https://ariakit.org/examples/tab-react-router) - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)

Whether the item should be registered as part of the collection.

A memoized function that returns props to be passed with the item during its registration in the store. @example ```jsx const getItem = useCallback((data) => ({ ...data, custom: true }), []); <CollectionItem getItem={getItem} /> ```