Component

<dom-tabs>

custom element

Tab list with managed ARIA, roving tabindex and panel linking via data-tab / data-panel pairs.

Demo

Tab panels

Tabs use data-tab on buttons and matching data-panel regions — roving focus and arrow keys built in.

basic.htmlhtml

<dom-tabs value="overview" class="block space-y-4">
	<div role="tablist" class="inline-flex gap-1 rounded-full border border-border bg-secondary p-1">
		<button data-tab="overview" type="button" class="rounded-full px-4 py-1.5 text-sm font-medium text-muted-fg">Overview</button>
		<button data-tab="pricing" type="button" class="rounded-full px-4 py-1.5 text-sm font-medium text-muted-fg">Pricing</button>
	</div>
	<div data-panel="overview" class="rounded-xl border border-border bg-secondary/40 p-4 text-sm text-muted-fg">Overview content goes here.</div>
	<div data-panel="pricing" class="rounded-xl border border-border bg-secondary/40 p-4 text-sm text-muted-fg">Pricing content goes here.</div>
</dom-tabs>

<script type="module">
	import '@getdom/studio/headless/tabs.js';
</script>

Usage

Plain HTML

<dom-tabs value="overview">
  <div role="tablist">
    <button data-tab="overview">Overview</button>
    <button data-tab="pricing">Pricing</button>
  </div>
  <div data-panel="overview">Overview content…</div>
  <div data-panel="pricing">Pricing content…</div>
</dom-tabs>

Slots

Name	Scope	Description
#(structural)	—	Pair each <button data-tab="key"> with a panel <div data-panel="key">. The tablist wrapper carries role="tablist".

Attributes

Name	Type	Description
value	string	Active tab key. Mirrors the currently-selected data-tab value.

From dom-tabs.__doc.attributes.

Events

Name	Payload	Description
dom:change	{ value }	Fired when the active tab changes.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Keyboard