Tabs os-014

Also known as: tab list, section switcher, in-page panels

Switch Account, Delivery, and Notes on the same page — one section shows at a time, without a new screen or an accordion.

Example

line — Meadow Farm oils subscription

Account

Meadow Farm oils for the Marsh household. Cold-pressed rapeseed, monthly — unaltered, not cooked or added to.

Name

Username

Plan

Variants

pill

500ml

Cold-pressed rapeseed for the Marsh kitchen. One bottle a month, unaltered.

Wednesday morning · farm gate cooler · 500ml rapeseed.

disabled

Billing opens after the first Wednesday delivery. Until then this tab stays unavailable.

How it works

Layout: A horizontal tab list, then one panel. Line tabs use a quiet rule under the selected label. Pill tabs sit on a muted track; the selected one is a raised surface. The panel is a bordered card.

Interaction: Click a tab to show its panel. Left and Right move to the next enabled tab and select it. Home and End jump to the ends. Only the selected tab is in the tab order. A disabled tab shows a not-allowed cursor and is skipped.

Motion: Colour and background ease on the fast transition. There is no sliding bar, spring, or scale. Reduced motion cuts the transition.

Content: Short section names, real farm-shop copy inside. One primary action in the visible panel. Do not paint the selected tab with brand green.

Relationships

An accordion (see FAQ Section) discloses answers in place — it is not a substitute for tabs. Showcase Tabs auto-play media; this component switches sections the person chooses. The earlier os-002 kit (Tabs visual variants) is a different stylesheet — do not load it with this one. Pair Select and Button inside a panel. A save can confirm with Toast without leaving the tab. Sheet is an edge overlay, not an in-page switcher.

Parameters

Name	Type	Default	Description
`label`	string	—	Accessible name for the tablist
`tabs`	TabItem[]	—	`id`, `label`, `panel`, optional `disabled`
`value`	string	—	Controlled selected tab id
`defaultValue`	string	first enabled	Uncontrolled initial tab
`variant`	string	`line`	`line` \| `pill`
`size`	string	`md`	`sm` \| `md`

Tokens

--font-primary --color-bg --color-bg-muted --color-text --color-text-secondary --color-border --color-border-focus --radius-sm --radius-md --radius-lg --shadow-sm --spacing-1 --spacing-2 --spacing-3 --spacing-4 --spacing-6 --text-sm --text-lg --transition-fast

Provenance

Item	Detail
Inspiration	21st.dev / shadcn Tabs pattern (principles only — not a dump)
Scout approved	Phil Parry, 2026-09-23
Maturity	experimental
Binding	`components/tabs/tabs.css` + `components/tabs/react/Tabs.tsx`
Catalogue CSS	`catalogue/components/tabs.css` (mirror — http.server roots at catalogue/)

Code

os-014 · Source: components/tabs/tabs.css ▾

<div class="og-tabs og-tabs--line og-tabs--md">
  <div class="og-tabs__list" role="tablist" aria-label="Oils subscription">
    <button type="button" role="tab" aria-selected="true" aria-controls="panel-account">Account</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="panel-delivery">Delivery</button>
  </div>
  <div role="tabpanel" id="panel-account">…</div>
  <div role="tabpanel" id="panel-delivery" hidden>…</div>
</div>

Tabs os-014

Account

Delivery

Notes

500ml

1 litre

Crate