Tab Row
Sourcecomponents/TabRow.astro
Switch a view
A segmented pill row that picks exactly one view — like the tabs in the Button showcase. Click a tab; the panel below swaps. It’s a UI control, not a form field.
Live — click a tab
The overview panel — the default view.
The specs panel — swapped in when you pick Specs.
The reviews panel — swapped in when you pick Reviews.
On light, dark & image
The selected tab fills; on dark it flips to a white fill.
On light
On dark
On image
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
tabs | { value, label }[] | — | The views to switch between. |
active | string | first tab | Value of the tab selected on load. |
surface | 'light' | 'dark' | 'light' | Dark surface treatment. |
ariaLabel | string | 'Views' | Accessible name for the tablist. |
Usage
Wrap the row and its panels in data-tabs; give each panel a data-tab-panel matching a tab value. The row hides/shows them and fires tabchange.
<div data-tabs>
<TabRow tabs={[
{ value: 'overview', label: 'Overview' },
{ value: 'specs', label: 'Specs' },
]} active="overview" />
<div data-tab-panel="overview">…overview…</div>
<div data-tab-panel="specs" hidden>…specs…</div>
</div>