Tabs
An accessible tab list. Arrow keys move between tabs, and only the active tab is in the tab order (roving tabindex).
Examples
Basic
A high-level summary of the project.
Show code
<Tabs {tabs} bind:active>{#snippet panel(id)}…{/snippet}</Tabs>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | { id: string; label: string }[] | — | The tab definitions, in order. |
active | string | first tab's id | The selected tab id. Bind it with bind:active. |
panel | Snippet<[string]> | — | Receives the active tab id and renders that panel. |
Panels come from the panel snippet, which receives the active
tab's id. Home/End and Left/Right/Up/Down are supported.