# Tabs
Use tabs to quickly switch between different views and pages.

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

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

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

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

### TabsRoot

| Property | Type | Description |
| --- | --- | --- |
| `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` | boolean | undefined | Whether the keyboard navigation will loop from last tab to first, and vice versa. Default: true |
| `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" | "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. Default: "horizontal" |
| `activationMode` | "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 Default: "automatic" |
| `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" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `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 |

### TabsRootProvider

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

### TabsRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => TabsApi<PropTypes>]> |  |

### TabsList

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

### TabsTrigger

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

### TabsIndicator

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

### TabsContent

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