Tabs

A CSS-only tabbed interface (no JavaScript). Children are tab: elements. The first tab is active by default. Supports up to 5 tabs.

Basic usage

tabs: Settings
  tab: Account
    email input: Email address...
    full input: Display name...
    full primary button: Save changes
  tab: Security
    password input: Current password...
    password input: New password...
    full danger button: Delete account
  tab: Billing
    ## Pro plan — $12/mo
    outline button: Change plan

How it works

Each tab: child creates:

1. A radio button (hidden) for state tracking
2. A tab label (the tab: label text)
3. A panel section with the tab's children

Switching tabs uses CSS :has() — no JavaScript required. Requires Chrome 105+ or Safari 15.4+.

Reference

Child	Description
tab: Label	A tab with a label and a panel. Panel holds any content.