Installation
Barrel
import { Tabs } from 'kumo-svelte';Granular
import { Tabs } from 'kumo-svelte/components/tabs';Usage
<script lang="ts">import { Tabs } from "kumo-svelte";</script><Tabs tabs={[ { value: "overview", label: "Overview" }, { value: "settings", label: "Settings" }, ]} selectedValue="overview"/>Examples
Variants
Segmented (Default)
A pill-shaped indicator slides between tabs on a subtle background.
Underline
A bottom border with a primary-colored indicator. The active tab has bolder text for emphasis.
Small Size
Use size="sm" for a compact tab bar that matches Input size="sm" height (h-6.5 / 26px).
Useful inside toolbars and filter rows.
Controlled
Use the value and onValueChange props for controlled state.
Many Tabs
Tabs automatically scroll horizontally when there are many items.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | TabsItem[] | - | Array of tab items to render. |
| value | string | - | Controlled value. |
| selectedValue | string | - | Default selected value for uncontrolled mode. Ignored when value is set. |
| onValueChange | (value: string) => void | - | Called when the value changes. |
| activateOnFocus | boolean | false | When true, tabs are activated immediately upon receiving focus via arrow keys. |
| variant | 'segmented' | 'underline' | "segmented" | Tab style. |
| size | 'base' | 'sm' | "base" | Tab size. |
| listClassName | string | - | Additional classes for the tab list element. |
| indicatorClassName | string | - | Additional classes for the indicator element. |
TabsItem
| Property | Type | Required |
|---|---|---|
| value | string | Yes |
| label | string | Snippet | Yes |
| disabled | boolean | No |
| class | string | No |
| className | string | No |
| content | Snippet | No |