Tabs
An accessible tab set with arrow-key roving focus and tabpanels. @startingPoint section="Navigation" subtitle="Underlined tab set with icons & roving focus" viewport="700x180"
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
An accessible tab set with arrow-key roving focus and tabpanels.
Accessibility
Arrow keys move between items; the current item is marked aria-current. Tabs follow the WAI-ARIA tabs pattern (roving tabindex, Home/End).
Import
const { Tabs } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
tabs | TabItem[] | Yes | |
selectedKey | string | — | Controlled selected tab id. |
defaultKey | string | — | |
onSelectionChange | (id: string) => void | — | |
className | string | — |