Tabs

Tabs

Examples

Default

The contained style, for tabs inside a card or a panel.

Rohan Mehta · Admin · joined 12 Mar 2025.

Line

variant="line" on TabsList puts the tabs on a track with an underline for the selected one, for page- and section-level navigation.

Tenant name, slug and data region.

Usage

Import

import { Tabs } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/tabs.

Variant props

Prop	Values
`variant`	`default` · `line`

Controlled and uncontrolled

Pass the value prop to control it, or the default prop to let the component own it.

Value	Default	Change
`value`	`defaultValue`	`onValueChange`

States

hover · focus-visible · active · disabled

Support

Feature	Status
Right-to-left	Supported
Dark mode	Supported
Density	Supported
Server rendering	Client component
Reduced motion	Supported

Accessibility

Follows the WAI-ARIA tabs pattern. Audited.

Check	Result
Semantics	Pass
Accessible name	Pass
Keyboard	Pass
Focus	Pass
Screen reader	Pass
Right-to-left	Pass
Reduced motion	Pass
Forced colours	Pass
Contrast	Pass

Keyboard

Tab Enter Space ArrowLeft ArrowRight Home End

Focus

One Tab stop for the group; arrow keys move between items (roving tab stop).

Tests

Covered by unit, accessibility (axe), interaction and visual tests.

ExamplesCopy Anchor Link

DefaultCopy Anchor Link

LineCopy Anchor Link

UsageCopy Anchor Link

ImportCopy Anchor Link

Variant propsCopy Anchor Link

Controlled and uncontrolledCopy Anchor Link

StatesCopy Anchor Link

SupportCopy Anchor Link

AccessibilityCopy Anchor Link

KeyboardCopy Anchor Link

FocusCopy Anchor Link

TestsCopy Anchor Link

On this page