Tab

A tab interface for switching between related content panels.

Overview

Tab is a compound component that provides a keyboard-accessible tab interface following the WAI-ARIA pattern. Content panels are linked to their corresponding triggers via a shared value prop. It supports both controlled (value + onValueChange) and uncontrolled (defaultValue) usage.

Use Tab for switching between related content views within the same page context — for example, different settings categories or different data views.
For step-by-step workflows, use a stepper pattern instead.
Avoid nesting tabs within tabs.

Accessibility

Follows the WAI-ARIA Tabs pattern with role="tablist", role="tab", and role="tabpanel".
Arrow Left / Arrow Right navigates between tab triggers.
Home moves focus to the first tab. End moves to the last tab.
Tab panels are linked to their triggers via aria-labelledby, providing context for screen readers.
Only the active tab panel is rendered in the accessibility tree; inactive panels are hidden.

Import

import { Tab } from "@cocso-ui/react";

Default

The default tab renders a list of triggers and linked content panels. Use defaultValue for uncontrolled usage and value with onValueChange for controlled usage.

Manage your account settings and preferences.

API Reference

Tab (Root)

Prop	Type	Default	Description
`defaultValue`	`string`	-	Value of the tab selected by default. Use for uncontrolled scenarios where the component manages selection internally.
`value`	`string`	-	Controlled selected tab value. Use together with `onValueChange` for programmatic tab switching.
`onValueChange`	`(value: string) => void`	-	Callback invoked when the user selects a different tab. Receives the new value string.

Tab.List

Container for tab triggers. Accepts Base UI Tabs.List props.

Tab.Trigger

Prop	Type	Default	Description
`value*`	`string`	-	Unique string that links this trigger to its corresponding `Tab.Content` panel.
`disabled`	`boolean`	`false`	Prevents this tab from being selected. The trigger remains visible but non-interactive and is skipped during keyboard navigation.

Tab.Content

Prop	Type	Default	Description
`value*`	`string`	-	Value that must match a `Tab.Trigger` value. The panel is shown only when its trigger is active.