Tabs

Tab navigation with content panels. Supports keyboard navigation and roving tabindex.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Tabs, TabsTrigger, TabsContent } from '@kittl/ui-react';

Usage

Web Component

<kittl-tabs value="designs">
  <kittl-tabs-trigger value="designs" slot="tab">Designs</kittl-tabs-trigger>
  <kittl-tabs-trigger value="templates" slot="tab">Templates</kittl-tabs-trigger>
  <kittl-tabs-content value="designs">Your designs here.</kittl-tabs-content>
  <kittl-tabs-content value="templates">Browse templates.</kittl-tabs-content>
</kittl-tabs>

React

<Tabs value="designs" onTabsChange={(e) => console.log(e.detail.value)}>
  <TabsTrigger value="designs" slot="tab">Designs</TabsTrigger>
  <TabsTrigger value="templates" slot="tab">Templates</TabsTrigger>
  <TabsContent value="designs">Your designs here.</TabsContent>
  <TabsContent value="templates">Browse templates.</TabsContent>
</Tabs>

Tabs Props

Property	Type	Default	Description
value	string	''	Currently active tab value
size	's' | 'm'	'm'	Tab size
fluid	boolean	false	Tabs fill available width equally

TabsTrigger Props

Property	Type	Default	Description
value	string	''	Unique value matching a TabsContent
active	boolean	false	Whether this tab is active (managed by parent)

TabsContent Props

Property	Type	Default	Description
value	string	''	Unique value matching a TabsTrigger
active	boolean	false	Whether this panel is visible (managed by parent)

Slots

Slot	Parent	Description
tab	Tabs	Place TabsTrigger elements here
(default)	Tabs	Place TabsContent elements here

Events

Event	Source	Detail	Description
tabs-change	Tabs	{ value: string }	Active tab changed
tab-select	TabsTrigger	{ value: string }	A trigger was clicked

React props: onTabsChange, onTabSelect

Accessibility

• Triggers: role="tab", aria-selected, aria-controls
• Content: role="tabpanel", aria-labelledby
• Keyboard: ArrowLeft/ArrowRight to navigate, auto-selects on arrow key
• Roving tabindex pattern — only the active tab is in the tab order