tabs

Pure CSS tabs using radios + :has(). No JS.

status: stable js: none support: has-selector

Preview

…

Markup

<div class="tabs"><div class="tabs-list" role="radiogroup" aria-label="X tabs"><input type="radio" name="X" id="X-1" checked><label for="X-1" class="tabs-trigger">T1</label></div><div class="tabs-panel" data-tab="X-1">…</div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/tabs.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add tabs

Accessibility

radio + :has() — exposes as an accessible radiogroup with no JS. For full ARIA tabs (role=tab/tablist/tabpanel + arrow-key nav) add @russfranky/shadcss-js/tabs and data-sc-tabs

Classes

.tabs .tabs-list .tabs-trigger .tabs-panel

Dependencies

base/tokens