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>

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>

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"	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`	"flex gap-2 border-b border-surface-200-800 mb-4 relative"	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 mb-2 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`	"h-0.5 bottom-0 w-(--width) bg-surface-950-50"	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