Component

Tabs

<dom-tabs>

Roving-tabindex tab list with managed ARIA, keyboard navigation, and panel linking.

Playground

Try every prop live

Tabs playground

Edit props in the inspector — switch tabs to preview panel slots and the active tab key.

Overview panel content.

Pricing panel content.

Changelog panel content.

Playground.vuevue

<script setup>
import { reactive } from 'vue';
import { DomTabs } from '@getdom/studio/vue';

const data = reactive({
	  "modelValue": "overview",
	  "tabs": [
	    {
	      "key": "overview",
	      "label": "Overview"
	    },
	    {
	      "key": "pricing",
	      "label": "Pricing"
	    },
	    {
	      "key": "changelog",
	      "label": "Changelog"
	    }
	  ],
	  "fill": false
	});
</script>

<template>
	<DomTabs
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Live preview

Overview content. Tabs preserve focus and announce panel changes to assistive tech.

Pricing content. Use the arrow keys to move between tabs.

Changelog content. Each panel is keyboard-reachable.

Usage

Vue

<script setup>
import { DomTabs } from '@getdom/studio/vue';
import { ref } from 'vue';
const active = ref('overview');
const tabs = [
  { key: 'overview', label: 'Overview' },
  { key: 'pricing',  label: 'Pricing' },
];
</script>

<template>
  <DomTabs v-model="active" :tabs="tabs">
    <template #overview>Overview content…</template>
    <template #pricing>Pricing content…</template>
  </DomTabs>
</template>

Usage

Web component

<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…</div>
  <div data-panel="pricing">Pricing…</div>
</dom-tabs>

Props

Name	Type	Default	Description
v-model	string	first tab key	Active tab key.
tabs	Array<{ key, label }>	—	Tabs to render.

Keyboard

← / →Move to previous / next tab.
Home / EndJump to first / last tab.
Enter / SpaceActivate focused tab.