Tabs

A set of tabbed panels where exactly one panel is visible at a time. Supports keyboard navigation with roving tabindex, horizontal and vertical orientations, and an optional animated indicator that tracks the active tab.

import { Tabs } from "@areia/slots";

document.querySelector("#root")!.innerHTML = `
  <div data-slot="tabs" class="w-80">
    <div data-slot="tabs-list" class="flex gap-1">
      <button data-slot="tabs-trigger" data-value="tab-1" class="win95-button border-b-0 data-[state=active]:bg-white">
        Tab One
      </button>
      <button data-slot="tabs-trigger" data-value="tab-2" class="win95-button border-b-0 data-[state=active]:bg-white">
        Tab Two
      </button>
      <button data-slot="tabs-trigger" data-value="tab-3" class="win95-button border-b-0 data-[state=active]:bg-white">
        Tab Three
      </button>
    </div>
    <div data-slot="tabs-content" data-value="tab-1" class="win95-inset -mt-0.5 min-h-20 p-3">
      Content for tab one.
    </div>
    <div data-slot="tabs-content" data-value="tab-2" class="win95-inset -mt-0.5 min-h-20 p-3">
      Content for tab two.
    </div>
    <div data-slot="tabs-content" data-value="tab-3" class="win95-inset -mt-0.5 min-h-20 p-3">
      Content for tab three.
    </div>
  </div>
`;

const root = document.querySelector('[data-slot="tabs"]')!;
const controller = Tabs.createTabs(root, {
  defaultValue: "tab-1",
  orientation: "horizontal",
});

Import

import { Tabs } from "@areia/slots";

Usage

import { Tabs } from "@areia/slots";

// Auto-bind a single root
const root = document.querySelector('[data-slot="tabs"]');
const controller = Tabs.createTabs(root, {
  defaultValue: "tab-1",
  activationMode: "auto",
});

// Listen for tab changes
root.addEventListener("tabs:change", (e) => {
  console.log(e.detail.value);
});

// Auto-bind all unbound roots in scope
const controllers = Tabs.create();

Expected Markup

The tabs component expects a tabs-list containing tabs-trigger elements, and a set of tabs-content panels. Each trigger and content panel must have a matching data-value attribute. An optional tabs-indicator slot provides an animated highlight that follows the active tab.

<div data-slot="tabs">
  <div data-slot="tabs-list">
    <button data-slot="tabs-trigger" data-value="tab-1">
      Tab One
    </button>
    <button data-slot="tabs-trigger" data-value="tab-2">
      Tab Two
    </button>
    <button data-slot="tabs-trigger" data-value="tab-3">
      Tab Three
    </button>
    <div data-slot="tabs-indicator"></div>
  </div>
  <div data-slot="tabs-content" data-value="tab-1">
    Content for tab one.
  </div>
  <div data-slot="tabs-content" data-value="tab-2">
    Content for tab two.
  </div>
  <div data-slot="tabs-content" data-value="tab-3">
    Content for tab three.
  </div>
</div>

Data Slots

CSS Custom Properties (Indicator)

When the tabs-indicator element is present, the controller sets the following CSS custom properties so you can animate its position and size:

Use these variables with CSS transitions for smooth indicator movement:

[data-slot="tabs-indicator"] {
  position: absolute;
  left: var(--active-tab-left);
  width: var(--active-tab-width);
  top: var(--active-tab-top);
  height: var(--active-tab-height);
  transition:
    left 200ms ease,
    width 200ms ease;
}

The indicator automatically updates on window resize, list scroll, and layout changes (via ResizeObserver).

Generated Attributes

Events

Outbound

Inbound

API Reference

Options

Controller

Controller

The controller is returned by Tabs.createTabs() and provides imperative control over the selection state.

const controller = Tabs.createTabs(root, {
  defaultValue: "tab-1",
});

// Select a tab programmatically
controller.select("tab-2");

// Read current state
console.log(controller.value); // "tab-2"

// Force-update indicator after external layout changes
controller.updateIndicator();

// Clean up
controller.destroy();

Keyboard Interaction

The tab list supports full keyboard navigation with roving tabindex:

Navigation wraps from the last trigger to the first and vice versa. Disabled triggers are skipped entirely.

Activation Modes

• "auto" (default): Arrow keys immediately select the tab as focus moves. This is the typical behavior users expect from tabs.
• "manual": Arrow keys move focus only. The user must press Enter or Space to activate the focused tab. Use this when tab changes have significant side effects (e.g., loading data).