Tabs
Tabs are used to organize content by grouping similar information on the same page.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Tabs } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| items * | readonly TabItem[] | — | The tabs in order. Each needs an id, a label and its panel content. |
| label * | string | — | Names the set for assistive technology. Say what is being switched between. |
| defaultSelected | string | — | The id showing on first render. Defaults to the first tab. |
Accessibility
What the component does for you, and what it needs from you.
- The set is a real tablist, so the arrow keys move between tabs and only the selected one is in the tab order.
- Each panel is tied to its tab, so a screen reader moves from the tab to its content rather than hunting for it.
- The label names the set, which is what a reader hears on entering it.