Tabs

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

Import

import '@kittl/ui';

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

Usage

<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>

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

/** Basic Tabs usage, rendered live on the docs site. */
export const TabsUsage = () => (
  <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	Attribute	Type	Default	Description
value	value	string	''	Currently active tab value
size	size	's' | 'm'	'm'	Tab size
fluid	fluid	boolean	false	Tabs fill available width equally

TabsTrigger Props

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

TabsContent Props

Property	Attribute	Type	Default	Description
value	value	string	''	Unique value matching a TabsTrigger
active	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