chrome

<tc-tabs>

Accessible tablist with one named slot per panel. Supports controlled and uncontrolled modes.

import "@ra9/tan-compose-kit/tabs"

Props

Name	Type	Default	Description
`tabs`	`Array<{ id: string; label: string }>`	`[]`	The tab definitions. Each `id` corresponds to a named slot.
`active`	`string`	`(first tab's id)`	The currently-active tab id. Reflects to the host. Read or set to control externally.

Events

Event	Detail	When
`tc-tab-change`	`{ active: string, previous: string }`	Fires when the user changes tabs (click or keyboard).

Slots

Slot	Description
`(per tab id)`	One named slot per tab. For a tab with `id: "overview"`, place content in `<div slot="overview">…</div>`.

CSS variables

Variable	Default	Description
`--tc-tabs-fg`	`var(--tc-color-ink, #14171f)`	Active tab + panel text color.
`--tc-tabs-fg-muted`	`var(--tc-color-ink-muted, #6b7280)`	Inactive tab color.
`--tc-tabs-rule`	`var(--tc-color-rule, #ece5d3)`	Bottom rule of the tab strip.
`--tc-tabs-accent`	`var(--tc-color-accent, #a16939)`	Active tab color + underline.
`--tc-tabs-font`	`var(--tc-font-sans, …)`	Font family.

Examples

Basic usage

Define your tabs with tabs, then slot panel content by id.

A summary of what this thing does.

A list of props.

A list of events.

<tc-tabs tabs='[ {"id":"overview","label":"Overview"}, {"id":"props","label":"Props"}, {"id":"events","label":"Events"} ]'> <div slot="overview">A summary of what this thing does.</div> <div slot="props">A list of props.</div> <div slot="events">A list of events.</div> </tc-tabs>

Controlled mode

active reflects to an attribute, so you can drive the component from the outside.

<tc-tabs id="t" tabs='[…]' active="props">…</tc-tabs> <script type="module"> const el = document.getElementById("t"); el.addEventListener("tc-tab-change", (e) => { console.log("switched", e.detail.previous, "→", e.detail.active); }); // Switch programmatically: el.active = "events"; </script>

Default tab

Omit active and the first tab in the array is shown.

<tc-tabs tabs='[{"id":"a","label":"A"},{"id":"b","label":"B"}]'> <div slot="a">Shown by default.</div> <div slot="b">Click to see this.</div> </tc-tabs>

Theming

<tc-tabs style="--tc-tabs-accent: #2b6cb0;" tabs='[…]' >…</tc-tabs>

Accessibility

Real role="tablist" + role="tab" + role="tabpanel" structure; aria-selected and aria-controls are wired up correctly.
Roving focus is implemented via tabindex — only the active tab is in the tab order; arrow keys move focus and selection between tabs.
Home / End jump to the first / last tab. Left / Right wrap at the ends.
Inactive panels use the hidden attribute so screen readers skip them.

← All components