Tabs

Switches between views of related content: a bar of tabs, and the panel of the selected one.

Content of Tab 1.

Usage

Import the component and render it.

import { Tabs } from 'src/components/Tabs/Tabs';
import { HouseLineIcon } from '@phosphor-icons/react';

<Tabs
  size="sm"
  items={[{"value":"tab-1","label":"Tab 1","icon":<HouseLineIcon />,"content":"Content of Tab 1."},{"value":"tab-2","label":"Tab 2","icon":<HouseLineIcon />,"content":"Content of Tab 2."},{"value":"tab-3","label":"Tab 3","icon":<HouseLineIcon />,"content":"Content of Tab 3."}]}
  label="Sections"
/>

Accessibility

Role: tablist (named by label) with tabs and one tabpanel, labelled by its tab.

Key	Action
`Tab`	Moves focus to the selected tab, then into the panel content
`Arrow Left / Right`	Selects the previous / next enabled tab (wraps around)
`Home / End`	Selects the first / last enabled tab

Only the selected tab is in the Tab order (roving tabindex); the arrow keys select as they move, since panels show instantly.
The panel is not focusable itself (no focus style is designed for it): put the content’s own controls or text in it.

Size

Set the size prop: Small is "sm", Large is "lg".

Content of Tab 1.

Small

Content of Tab 1.

Large

<Tabs
  size="sm"
  items={[{"value":"tab-1","label":"Tab 1","icon":<HouseLineIcon />,"content":"Content of Tab 1."},{"value":"tab-2","label":"Tab 2","icon":<HouseLineIcon />,"content":"Content of Tab 2."},{"value":"tab-3","label":"Tab 3","icon":<HouseLineIcon />,"content":"Content of Tab 3."}]}
/>
<Tabs
  size="lg"
  items={[{"value":"tab-1","label":"Tab 1","icon":<HouseLineIcon />,"content":"Content of Tab 1."},{"value":"tab-2","label":"Tab 2","icon":<HouseLineIcon />,"content":"Content of Tab 2."},{"value":"tab-3","label":"Tab 3","icon":<HouseLineIcon />,"content":"Content of Tab 3."}]}
/>

Composition

Use the following composition to build a Tabs:

Tabs
└── Tab

Tab

One tab of a Tabs bar: an optional leading icon and a label (or icon only). Only used inside Tabs.

Tab

<Tab label="Tab" />

Actions

Pass callbacks to respond to the component.

import { Tabs } from 'src/components/Tabs/Tabs';
import { HouseLineIcon } from '@phosphor-icons/react';

<Tabs
  size="sm"
  items={[{"value":"tab-1","label":"Tab 1","icon":<HouseLineIcon />,"content":"Content of Tab 1."},{"value":"tab-2","label":"Tab 2","icon":<HouseLineIcon />,"content":"Content of Tab 2."},{"value":"tab-3","label":"Tab 3","icon":<HouseLineIcon />,"content":"Content of Tab 3."}]}
  label="Sections"
  onValueChange={(value) => console.log(value)}
/>

Callback	When
`onValueChange`	Called when another tab is selected.