Interface: TabProviderProps

Hierarchy

• TabStoreProps

  ↳ TabProviderProps

Table of contents

Properties

• activeId
• children
• defaultActiveId
• defaultItems
• defaultSelectedId
• focusLoop
• focusShift
• focusWrap
• includesBaseElement
• items
• orientation
• rtl
• selectOnMove
• selectedId
• setActiveId
• setItems
• setSelectedId
• store
• virtualFocus

Properties

activeId

• Optional activeId: null | string

The current focused item id.

• null focuses the base composite element and users will be able to navigate out of it using arrow keys.
• If activeId is initially set to null, the includesBaseElement prop will also default to true, which means the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Inherited from

TabStoreProps.activeId

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:122

children

• Optional children: ReactNode

Defined in

node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/tab/tab-provider.d.ts:20

defaultActiveId

• Optional defaultActiveId: null | 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.

Inherited from

TabStoreProps.defaultActiveId

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:202

defaultItems

• Optional defaultItems: Item[]

The defaut value for the items state.

Default

[];

Inherited from

TabStoreProps.defaultItems

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/collection/collection-store.d.ts:61

defaultSelectedId

• Optional defaultSelectedId: null | 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.

Inherited from

TabStoreProps.defaultSelectedId

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:83

focusLoop

• Optional focusLoop: boolean | Orientation

Default

true;

Inherited from

TabStoreProps.focusLoop

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:22

focusShift

• Optional focusShift: boolean

Works only on two-dimensional composites. If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.

Default

false;

Inherited from

TabStoreProps.focusShift

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:102

focusWrap

• Optional focusWrap: boolean | Orientation

Works only on two-dimensional composites. If enabled, moving to the next item from the last one in a row or column will focus the first item in the next row or column and vice-versa.

• true wraps between rows and columns.
• horizontal wraps only between rows.
• vertical wraps only between columns.
• If focusLoop matches the value of focusWrap, 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.

Default

false;

Inherited from

TabStoreProps.focusWrap

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:95

includesBaseElement

• Optional includesBaseElement: boolean

Indicates whether the composite element should be included in the focus order.

Default

false;

Inherited from

TabStoreProps.includesBaseElement

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:112

items

• Optional items: Item[]

Lists all the items with their meta data. This state is automatically updated when an item is registered or unregistered with the registerItem function.

Inherited from

TabStoreProps.items

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/collection/collection-store.d.ts:18

orientation

• Optional orientation: Orientation

Default

"horizontal";

Inherited from

TabStoreProps.orientation

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:18

rtl

• Optional rtl: boolean

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.

Default

false;

Inherited from

TabStoreProps.rtl

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:53

selectOnMove

• Optional selectOnMove: boolean

Whether the tab should be selected when it receives focus. If it's set to false, the tab will be selected only when it's clicked.

Live examples:

• Tab with React Router (opens in a new tab)

Default

true;

Inherited from

TabStoreProps.selectOnMove

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:39

selectedId

• Optional selectedId: null | 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:

• Tab with React Router (opens in a new tab)

Inherited from

TabStoreProps.selectedId

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/tab/tab-store.d.ts:30

setActiveId

• Optional setActiveId: (activeId: undefined | null | string) => void

Type declaration

▸ (activeId): void

A callback that gets called when the activeId state changes.

Parameters

Returns

void

Example

const [activeId, setActiveId] = useState(null);
const composite = useCompositeStore({ activeId, setActiveId });

Inherited from

TabStoreProps.setActiveId

Defined in

node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/composite/composite-store.d.ts:35

setItems

• Optional setItems: (...args: [items: Item[]]) => void

Type declaration

▸ (...args): void

A callback that gets called when the items state changes.

Parameters

Returns

void

Example

const [items, setItems] = useState([]);
const collection = useCollectionStore({ items, setItems });

Inherited from

TabStoreProps.setItems

Defined in

node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/collection/collection-store.d.ts:32

setSelectedId

• Optional setSelectedId: (selectedId: undefined | null | string) => void

Type declaration

▸ (selectedId): void

Function that will be called when the selectedId state changes.

Parameters

Returns

void

Inherited from

TabStoreProps.setSelectedId

Defined in

node_modules/.pnpm/@ariakit+react-core@0.3.5_react-dom@18.2.0_react@18.2.0/node_modules/@ariakit/react-core/cjs/tab/tab-store.d.ts:70

store

• Optional store: Store<Partial<TabStoreState>>

Another store object that will be kept in sync with the original store.

Inherited from

TabStoreProps.store

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/utils/store.d.ts:50

virtualFocus

• Optional virtualFocus: boolean

If enabled, the composite element will act as an aria-activedescendant (opens in a new tab) container instead of roving tabindex (opens in a new tab). DOM focus will remain on the composite element while its items receive virtual focus.

Live examples:

• Multi-selectable Combobox (opens in a new tab)

Default

false;

Inherited from

TabStoreProps.virtualFocus

Defined in

node_modules/.pnpm/@ariakit+core@0.3.4/node_modules/@ariakit/core/cjs/composite/composite-store.d.ts:34