Tabs - Skeleton

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>

Anchor

Tab 1 Tab 2 Tab 3

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">
      {#snippet element({ attributes })}
        <a href="#tab-1" {...attributes}>Tab 1</a>
      {/snippet}
    </Tabs.Trigger>
    <Tabs.Trigger value="tab-2">
      {#snippet element({ attributes })}
        <a href="#tab-2" {...attributes}>Tab 2</a>
      {/snippet}
    </Tabs.Trigger>
    <Tabs.Trigger value="tab-3">
      {#snippet element({ attributes })}
        <a href="#tab-3" {...attributes}>Tab 3</a>
      {/snippet}
    </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

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>

RTL

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
`class`	"w-full flex data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row"	string \| undefined The base classes provided by Skeleton
`ids`	-	Partial<{ root: string; trigger: string; list: string; content: 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<[{ attributes: Record<string, unknown>; }]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[TabsRootContextType]>

List

Property	Default	Type
`class`	"relative data-[orientation=horizontal]:mb-4 data-[orientation=horizontal]:pb-2 data-[orientation=vertical]:pe-2 data-[orientation=vertical]:me-4 flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col gap-2 data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-e border-surface-200-800"	string \| undefined The base classes provided by Skeleton
`element`	-	Snippet<[{ attributes: Record<string, unknown>; }]> \| undefined Render the element yourself

Trigger

Property	Default	Type
`class`	"btn hover:preset-tonal-primary data-disabled:opacity-50 data-disabled:pointer-events-none"	string \| undefined The base classes provided by Skeleton
`value`	-	string The value of the tab
`disabled`	-	boolean \| undefined Whether the tab is disabled
`element`	-	Snippet<[{ attributes: Record<string, unknown>; }]> \| undefined Render the element yourself

Indicator

Property	Default	Type
`class`	"bg-surface-950-50 data-[orientation=horizontal]:w-(--width) data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:bottom-0 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:h-(--height) data-[orientation=vertical]:end-0"	string \| undefined The base classes provided by Skeleton
`element`	-	Snippet<[{ attributes: Record<string, unknown>; }]> \| undefined Render the element yourself

Content

Property	Default	Type
`class`	""	string \| undefined The base classes provided by Skeleton
`value`	-	string The value of the tab
`element`	-	Snippet<[{ attributes: Record<string, unknown>; }]> \| undefined Render the element yourself