useTabList

Provides the behavior and accessibility implementation for a tab list. Tabs organize content into multiple sections and allow users to navigate between them.

Founding of Rome

Monarchy and Republic

Empire

Arma virumque cano, Troiae qui primus ab oris.

Example

Tabs.tsx

Tabs.css

Example

Tabs.tsx

Tabs.css

import {Tab, Tabs} from './Tabs';

<Tabs aria-label="History of Ancient Rome">
  <Tab id="FoR" title="Founding of Rome">Arma virumque cano, Troiae qui primus ab oris.</Tab>
  <Tab id="MaR" title="Monarchy and Republic">Senatus Populusque Romanus.</Tab>
  <Tab id="Emp" title="Empire">Alea jacta est.</Tab>
</Tabs>

API

<Tabs>
  <TabList>
    <Tab>
      <SelectionIndicator />
    </Tab>
  </TabList>
  <TabPanels>
    <TabPanel />
  </TabPanels>
</Tabs>

useTabListState<T extends object>(props: TabListStateOptions<T>): TabListState<T>

useTabList<T>(
  props: AriaTabListOptions<T>,
state: TabListState<T>,
ref: RefObject<HTMLElement | null>
): TabListAria

useTab<T>(
  props: AriaTabProps,
state: TabListState<T>,
ref: RefObject<FocusableElement | null>
): TabAria

useTabPanel<T>(
  props: AriaTabPanelProps,
state: TabListState<T> | null,
ref: RefObject<Element | null>
): TabPanelAria

TabListState

Properties

Name	Type
`isDisabled`	`boolean`
Whether the tab list is disabled.
`selectedItem`	`Node<T> \| null`
The value of the currently selected item.
`collection`	`Collection<Node<T>>`
A collection of items in the list.
`selectionManager`	`SelectionManager`
A selection manager to read and update multiple selection state.

`selectedKey`	`Key \| null`
The key for the currently selected item.
`disabledKeys`	`Set<Key>`
A set of items that are disabled.

Methods

`setSelectedKey(key: Key \| null): void`
Sets the selected key.

AriaTabListOptions

Name	Type	Default
`keyboardActivation`	`'automatic' \| 'manual'`	Default: `'automatic'`
Whether tabs are activated automatically on focus or manually.
`orientation`	`Orientation`	Default: `'horizontal'`
The orientation of the tabs.
`isDisabled`	`boolean`	Default: —
Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.

`items`	`Iterable<T>`	Default: —
Item objects in the collection.

`selectedKey`	`Key`	Default: —
The currently selected key in the collection (controlled).
`defaultSelectedKey`	`Key`	Default: —
The initial selected keys in the collection (uncontrolled).
`onSelectionChange`	`(key: Key) => void`	Default: —
Handler that is called when the selection changes.
`disabledKeys`	`Iterable<Key>`	Default: —
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

TabListAria

Name	Type
`tabListProps`	`DOMAttributes`
Props for the tablist container.

AriaTabProps

Name	Type
`key`	`Key`
The key of the tab.
`isDisabled`	`boolean`
Whether the tab should be disabled.

`shouldSelectOnPressUp`	`boolean`
Whether the tab selection should occur on press up instead of press down.

TabAria

Name	Type
`tabProps`	`DOMAttributes`
Props for the tab element.
`isSelected`	`boolean`
Whether the tab is currently selected.
`isDisabled`	`boolean`
Whether the tab is disabled.
`isPressed`	`boolean`
Whether the tab is currently in a pressed state.

AriaTabPanelProps

Name	Type
`id`	`Key`
The unique id of the tab.

TabPanelAria

Name	Type
`tabPanelProps`	`DOMAttributes`
Props for the tab panel element.