Tabs

HTMLElement

MutableRefObject<undefined>

ComboboxStore<ComboboxStoreSelectedValue>

A reference to a [combobox store](https://ariakit.org/reference/use-combobox-store). This is automatically set when rendering tabs inside a [Combobox](https://ariakit.org/components/combobox). Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

CompositeStore<CompositeStoreItem>

A reference to another [composite store](https://ariakit.org/reference/use-composite-store). This is automatically set when rendering tabs as part of another composite widget, such as [Combobox](https://ariakit.org/components/combobox) or [Select](https://ariakit.org/components/select). Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

string

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.

TabStoreItem[] | undefined = []

The defaut value for the [`items`](https://ariakit.org/reference/collection-provider#items) state.

string

The id of the tab whose panel is currently visible. If it's `undefined`, it will be automatically set to the first enabled tab. Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)

(activeId: string) => void

A callback that gets called when the [`activeId`](https://ariakit.org/reference/composite-provider#activeid) state changes.

BivariantCallback<(items: TabStoreItem[]) => void>

A callback that gets called when the [`items`](https://ariakit.org/reference/collection-provider#items) state changes. @example const [items, setItems] = useState([]); const collection = useCollectionStore({ items, setItems });

(selectedId: string) => void

Function that will be called when the [`selectedId`](https://ariakit.org/reference/tab-provider#selectedid) state changes. Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

"sm" | "md" | undefined = md

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

Boolean | undefined = false

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)

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](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)

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`](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)

Boolean | undefined = true

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.

(props: CollectionStoreItem) => CollectionStoreItem

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} /> ```

string

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)

BivariantCallback<(event: SyntheticEvent<HTMLElement, 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 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)

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

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.

Boolean | undefined = true

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

string

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)

Boolean | undefined = false

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)

WrapElement