Navigation

Tabs

WAI-ARIA tabs with automatic activation, roving focus, three visual variants and horizontal or vertical orientation.

Import

import { Tabs, TabList, Tab, TabPanel } from "@zephora/react";

Examples

Basic

Link tabs and panels through a shared `value`.

Manage your account details.

<Tabs defaultValue="account">
  <TabList aria-label="Settings">
    <Tab value="account">Account</Tab>
    <Tab value="password">Password</Tab>
    <Tab value="team" disabled>Team</Tab>
  </TabList>
  <TabPanel value="account">Manage your account details.</TabPanel>
  <TabPanel value="password">Change your password.</TabPanel>
  <TabPanel value="team">Invite teammates.</TabPanel>
</Tabs>

Variants

line (default), enclosed and pill.

Enclosed variant.

Pill variant.

<Tabs defaultValue="a" variant="enclosed">…</Tabs>
<Tabs defaultValue="a" variant="pill">…</Tabs>

Controlled

Drive the selected tab from the outside with `value` + `onValueChange`.

Inbox is empty.

Active: inbox

const [tab, setTab] = React.useState("inbox");

<Tabs value={tab} onValueChange={setTab}>
  <TabList aria-label="Mail">
    <Tab value="inbox">Inbox</Tab>
    <Tab value="sent">Sent</Tab>
  </TabList>
  <TabPanel value="inbox">Inbox is empty.</TabPanel>
  <TabPanel value="sent">Nothing sent yet.</TabPanel>
</Tabs>
<p>Active: {tab}</p>

API

Tabs props

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected tab value.
`defaultValue`	`string`	—	Initially selected tab value (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called with the newly selected value.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab list direction; also switches the arrow-key axis.
`variant`	`"line" \| "enclosed" \| "pill"`	`"line"`	Visual style.
`unstyled`	`boolean`	`false`	Headless mode — inherited by all parts.

Tab props

Prop	Type	Default	Description
`value` *	`string`	—	Value linking this tab to its TabPanel.
`disabled`	`boolean`	—	Disables the trigger.
`unstyled`	`boolean`	—	Overrides the inherited headless mode.

TabPanel props

Prop	Type	Default	Description
`value` *	`string`	—	Value linking this panel to its Tab.
`unstyled`	`boolean`	—	Overrides the inherited headless mode.

Keyboard

Key	Action
`ArrowRight / ArrowLeft`	Move focus to the next/previous tab (horizontal); focusing selects it.
`ArrowDown / ArrowUp`	Move focus between tabs when orientation is vertical.
`Home / End`	Focus the first / last enabled tab.
`Tab`	Moves focus from the tab list into the active panel.