Component
Tabs
Tabbed navigation for switching between panels of content. Supports keyboard navigation, disabled tabs, and controlled/uncontrolled modes.
Default
This is the overview panel content.
Sizes
Small
Compact tabs for dense layouts.
Large
Large tabs for top-level navigation.
Disabled Tab
This tab is active and selectable.
Usage
tsx
import { Tabs } from 'starkit-ui';
<Tabs
items={[
{ key: 'tab1', label: 'First', content: <p>First panel</p> },
{ key: 'tab2', label: 'Second', content: <p>Second panel</p> },
{ key: 'tab3', label: 'Disabled', content: <p>Hidden</p>, disabled: true },
]}
onChange={(key) => console.log('Active:', key)}
/>
Accessibility
- Arrow Left/Right — navigate between tabs
- Home / End — jump to first/last tab
- Roving tabindex — only active tab is in tab order
- Proper
role="tablist",role="tab",role="tabpanel"
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items * | TabItem[] | — | Array of tab definitions (key, label, content, disabled) |
| defaultActiveKey | string | — | Key of the initially active tab (uncontrolled) |
| activeKey | string | — | Active tab key (controlled mode) |
| onChange | (key: string) => void | — | Callback when active tab changes |
| size | 'sm' | 'md' | 'lg' | 'md' | Size preset |