Tabs

A headless tab primitive with roving focus, automatic or manual keyboard activation, disabled tabs, and panel composition.

Track the current release shape, ownership, and unresolved checkpoints before the next handoff.

Anatomy

Give every Tabs.Tab a unique value and pair it with a Tabs.Panel carrying the same value. The optional Tabs.Indicator tracks the active tab through CSS variables (--active-tab-left, --active-tab-top, --active-tab-width, --active-tab-height) so it can animate between tabs.

<script>
	import { Tabs } from '@human-kit/ui';
</script>

<Tabs.Root defaultValue="overview">
	<Tabs.List aria-label="Account sections">
		<Tabs.Tab value="overview">Overview</Tabs.Tab>
		<Tabs.Tab value="billing">Billing</Tabs.Tab>
		<Tabs.Indicator />
	</Tabs.List>

	<Tabs.Panel value="overview">Overview content</Tabs.Panel>
	<Tabs.Panel value="billing">Billing content</Tabs.Panel>
</Tabs.Root>

Manual activation

By default arrow keys activate tabs as focus moves. With keyboardActivation="manual", arrow keys only move focus and the focused tab activates on Enter or Space — useful when switching panels is expensive.

Vertical orientation and disabled tabs

Set orientation="vertical" to stack the tab list and switch arrow-key navigation to Up/Down. Pass disabledKeys on Tabs.Root (or disabled on a single Tabs.Tab) to keep specific tabs from being activated.

Display name, avatar, and public contact details.

Usage guidelines

  • Provide a unique value for every Tabs.Tab and matching Tabs.Panel.
  • Use value / onChange for controlled state and defaultValue for uncontrolled state.
  • Set defaultValue={null} when no tab should be active initially.
  • Use keyboardActivation="manual" when panel activation is expensive or should wait for Enter/Space.
  • Use orientation="vertical" for vertical tab lists.
  • Use forceMount on Tabs.Panel when inactive panel state must be preserved in the DOM.

Accessibility

  • Tabs.List renders role="tablist" and mirrors the configured orientation.
  • Tabs.Tab renders button semantics with role="tab", aria-selected, and aria-controls.
  • Tabs.Panel renders role="tabpanel" and aria-labelledby.
  • Arrow keys move focus within the tab list, Home/End jump to the first or last enabled tab, and focus wraps at the ends.

API reference

Root

The tabs container. Holds the selected value and provides context to the list, tabs, indicator, and panels.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-disabled Present when the whole tabs group is disabled.
data-orientation The configured orientation ('horizontal' | 'vertical').
data-tabs-root Identifies the root element.

List

The tab strip. Renders role="tablist" and manages roving focus between tabs.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-disabled Present when the whole tabs group is disabled.
data-orientation The configured orientation ('horizontal' | 'vertical').
data-tabs-list Identifies the list element.

Tab

A single tab button. Renders role="tab" with aria-selected and aria-controls pointing at its panel.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-activation-direction Direction the selection moved from the previously active tab ('left' | 'right' | 'up' | 'down').
data-disabled Present when the tab is disabled.
data-focus-visible Present while focus should be visibly indicated (keyboard modality).
data-focused Present while the tab has focus.
data-orientation The configured orientation ('horizontal' | 'vertical').
data-selected Present while the tab is the active tab.
data-tabs-tab Identifies the tab element.
data-tabs-value The tab's value, stringified.
data-tabs-value-type The runtime type of the tab's value ('string' | 'number').

Indicator

An optional visual marker for the active tab. Measures the active tab and exposes its position and size through the --active-tab-left/top/width/height CSS variables.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-activation-direction Direction the selection moved from the previously active tab ('left' | 'right' | 'up' | 'down').
data-hidden Present when no tab is active.
data-orientation The configured orientation ('horizontal' | 'vertical').
data-tabs-indicator Identifies the indicator element.

Panel

The content associated with a tab. Renders role="tabpanel" with aria-labelledby, and is hidden while its tab is inactive.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-hidden Present while the panel's tab is inactive and the panel is hidden.
data-selected Present while the panel's tab is active.
data-tabs-panel Identifies the panel element.
data-tabs-value The panel's value, stringified.
data-tabs-value-type The runtime type of the panel's value ('string' | 'number').