Tabs

Accessible tablist with a sliding indicator and lazy panels.

When to use

Use Tabs when you need accessible tablist with a sliding indicator and lazy panels.

Import

TypeScript

import { Tabs } from '@gzodo/ui'

Tabs mirrors the CRM compound API: Tabs.List, Tabs.Tab, and Tabs.Content. The active underline slides with transform. Inactive panels unmount by default; set forceMount to keep them hidden instead. Arrow keys, Home, and End move focus across tabs.

Examples

Project summary and recent highlights.

Basic

Controlled value and onChange. Only the active panel mounts.

General preferences.

Vertical

direction="left" or right for a side rail. Use short labels or icons in the rail.

Tabs

Property

Description

Type

Default

value

Controlled active tab value.

string

—

defaultValue

Initial value for uncontrolled usage.

string

—

onChange

Called when the active tab changes.

(value: string) => void

—

direction

Where the tab list sits relative to content.

'top' | 'bottom' | 'left' | 'right'

'top'

fullWidth / fullHeight

Stretch the root along the axis.

boolean

—

Tabs.Tab / Tabs.Content

Property

Description

Type

Default

value

Shared id between a tab and its panel.

string

—

disabled

Tabs.Tab only. Skips selection and keyboard focus.

boolean

—

forceMount

Tabs.Content only. Keep inactive panels mounted and hidden.

boolean

false

Radio

Form