Skip to main content

Tabs

Stable

Four visual variants with a sliding active indicator via CSS transform — zero layout recalculation. Full ARIA tablist pattern with arrow key navigation between triggers.

NavigationCompoundVhyxSeal

Interactive example

Overview — project summary and key metrics.
Dashboard tabs

Import

tsx
import { Tabs } from '@vhyxui/react'

// Sub-components
// Tabs.List    — contains the tab triggers
// Tabs.Trigger — individual tab button
// Tabs.Content — panel shown when its tab is active

Variants

Content for First tab
variant="default"
Content for First tab
variant="pills"
Content for First tab
variant="underline"
Content for First tab
variant="enclosed"

Sizes

Content A
Content A
Content A
sm, md, lg

Props

PropTypeDefaultDescription
valuestring—Controlled active tab value.
defaultValuestring—Default active tab for uncontrolled usage.
onValueChange(value: string) => void—Called when the active tab changes.
orientation'horizontal' | 'vertical''horizontal'Layout direction of the tab list.
variant'default' | 'pills' | 'underline' | 'enclosed''default'Visual style of the tab triggers.
size'sm' | 'md' | 'lg''md'Size of the tab trigger buttons.
contractPartial<ComponentContract>—VhyxSeal contract override.

Tabs.Trigger accepts value: string (required) and disabled?: boolean.Tabs.Content accepts value: string (required).

Accessibility

  • ✓ role="tablist" on List, role="tab" on Trigger, role="tabpanel" on Content.
  • ✓ aria-selected on the active trigger. aria-controls links each trigger to its panel.
  • ✓ Arrow keys navigate between triggers. Tab moves focus into the panel content.
  • ✓ Sliding indicator uses CSS transform — no layout recalculation or reflow.

Keyboard navigation

KeyAction
Arrow RightorArrow DownMove to the next tab trigger (wraps around).
Arrow LeftorArrow UpMove to the previous tab trigger (wraps around).
HomeJump to the first tab.
EndJump to the last tab.
TabMove focus out of the tab list into the panel content.

Agent contract

Default VhyxSeal contract shipped with every Tabs.

Default contract
{
  "type": "navigation",
  "intent": "navigate-tabs",
  "description": "Switches between content panels by activating a tab trigger",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "Changes the active content panel — no data mutation",
  "affects": [
    "view"
  ],
  "reversible": true,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_143fdd55"
}

Theming

Override these CSS tokens to theme Tabs.

--vhyx-color-accentActive indicator / active trigger color
--vhyx-color-accent-subtlePills active background
--vhyx-color-borderDefault variant bottom border
--vhyx-radius-mdPills and enclosed border radius
--vhyx-duration-normalIndicator slide duration
--vhyx-easing-springIndicator slide easing

Examples

Code editor tabs (enclosed)

<Button variant="primary">…</Button>
File tabs with enclosed variant

Profile page navigation (underline)

24 posts
Content sections as tabs