Tabs
Tabs group related content into sections on the same page.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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[] | None | The tabs in order. Each needs an id, a label and its panel content. |
| label * | string | None | Names the set for assistive technology. Say what is being switched between. |
| defaultSelected | string | None | 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 can move straight from the tab to its content.
- The label names the set. Screen reader users hear it when they move into the tabs.