Tabs

Content for Tab 1

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="tab-1">
  <Tabs.List>
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
  <Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
  <Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
</Tabs>

Fluid Width

Content for Tab 1

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="tab-1">
  <Tabs.List>
    <Tabs.Trigger class="flex-1" value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger class="flex-1" value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger class="flex-1" value="tab-3">Tab 3</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
  <Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
  <Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
</Tabs>

Vertical

Content for Tab 1

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="tab-1" orientation="vertical">
  <Tabs.List>
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
  <Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
  <Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
</Tabs>

Direction

Content for Tab 1

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="tab-1" dir="rtl">
  <Tabs.List>
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
  <Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
  <Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
</Tabs>

API Reference

Root

Property	Default	Type
`ids`	-	Partial<{ root: string; trigger: (value: string) => string; list: string; content: (value: string) => string; indicator: string; }> \| undefined The ids of the elements in the tabs. Useful for composition.
`translations`	-	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`loopFocus`	true	boolean \| undefined Whether the keyboard navigation will loop from last tab to first, and vice versa.
`value`	-	string \| null \| undefined The controlled selected tab value
`defaultValue`	-	string \| null \| undefined The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`activationMode`	"automatic"	"manual" \| "automatic" \| undefined The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`onValueChange`	-	((details: ValueChangeDetails) => void) \| undefined Callback to be called when the selected/active tab changes
`onFocusChange`	-	((details: FocusChangeDetails) => void) \| undefined Callback to be called when the focused tab changes
`composite`	-	boolean \| undefined Whether the tab is composite
`deselectable`	-	boolean \| undefined Whether the active tab can be deselected when clicking on it.
`navigate`	-	((details: NavigateDetails) => void) \| null \| undefined Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	() => TabsApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => TabsApi<PropTypes>]>

List

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Trigger

Property	Default	Type
`value`	-	string The value of the tab
`disabled`	-	boolean \| undefined Whether the tab is disabled
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Indicator

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

Property	Default	Type
`value`	-	string The value of the tab
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Skeleton

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Fluid Width

Vertical

Direction

API Reference

Root

RootProvider

RootContext

List

Trigger

Indicator

Content