Navigation

Tabs

Moves between related views without losing context.

idle

Usage

import { Tabs, TabsList, TabsPanel, TabsTab } from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Tabs>
	<TabsList>
		<TabsTab />
	</TabsList>
	<TabsPanel />
</Tabs>

Tabs share compact sizing with segmented controls. Arrow keys move focus; manual activation waits for Enter or Space.

Guidance	Practice
Do	Use concise labels for related panels. Keep panel headings and reading order consistent.

Guidance	Boundary
Scope	Use navigation links for routes. Tabs change views within the current context.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value`	`string \| number`	`—`	Controls the active tab.
`defaultValue`	`string \| number`	`—`	Sets the initially active tab.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Sets the tab navigation orientation.
`TabsList`	`TabsListProps`	`—`	Groups tabs; size defaults to default and variant supports default or underline.
`TabsTab`	`TabsTabProps`	`—`	Selects a panel when activated.
`TabsPanel`	`TabsPanelProps`	`—`	Contains the content associated with a tab.
`TabsList.activateOnFocus`	`boolean`	`false`	Arrow keys move focus. Enable this to select a panel on focus; otherwise use Enter or Space.
`TabsIndicator`	`TabsIndicatorProps`	`Automatic`	TabsList supplies a default animated indicator. An explicit indicator replaces its visible presentation.