Tabs
A set of tabs with an active index.
Pass Tab elements as children. theme sets the appearance: line (default), pill, or pill-secondary. index enables controlled mode, defaultIndex sets the initial tab. onChange receives the index and the event; it also fires on keyboard navigation with arrows, Home, and End. The markup uses the tablist, tab, and tabpanel roles.
Live example
Content for "One" tab
Example controls
Usage
import { Tab, Tabs } from '@prosazhin/pbcomponents';
<Tabs
defaultIndex={0}
theme='pill'
>
{['One', 'Two', 'Three', 'Four', 'Five'].map((label) => (
<Tab
key={label}
label={label}
>
<div style={{ marginTop: 24 }}>{`Content for "${label}" tab`}</div>
</Tab>
))}
</Tabs>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | Tab[] | Tabs with labels and content. | — |
theme | 'line' | 'pill' | 'pill-secondary'line · pill · pill-secondary | Tabs appearance; passed to every Tab. | line |
index | number | Active tab in controlled mode. | — |
defaultIndex | number0 · 1 · 2 · 3 · 4 | Initial active tab index. | 0 |
onChange | (index: number, event: MouseEvent | KeyboardEvent) => void | Called when a tab is chosen with the mouse or with arrows, Home and End. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.