Navigation

Tabs

Switch between related panels with arrow-key navigation.

StableNew shared patternRegistry JSON

Workspace name

Shown in the sidebar.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add tabs

Writes components/ui/tabs.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/tabs";

Props and composition points for Tabs. Native element props pass through.

Prop	Type	Default	Description
`defaultValue / value / onValueChange`	`string / string / (value: string) => void`	None	Controlled or uncontrolled selected tab.
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	Arrow-key direction. Also set aria-orientation on the list.
`TabsTrigger value`	`string`	None	Matches the corresponding TabsContent value. Required.
`disabled`	`boolean`	None	On TabsTrigger, removes it from the tab order.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Radix manages tablist, tab, and tabpanel roles, aria-selected, and aria-controls.
Arrow keys move between tabs, Home and End jump to the ends, and activation follows focus.
Give the tab list an accessible name with aria-label so it is distinguishable from other tab groups.
Only the selected panel is rendered, so do not hide essential page content behind a tab.

Key	Action
`ArrowLeft`or`ArrowRight`	Move between horizontal tabs.
`ArrowUp`or`ArrowDown`	Move between vertical tabs.
`Home`or`End`	Move to the first or last tab.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.