# 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

### TabsRootProps

| Property        | Default      | 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?      | 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.&#xA;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\`&#xA;- \`horizontal\`: only left and right arrow key navigation will work.&#xA;- \`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\`&#xA;- \`manual\`: Tabs are activated when clicked or press \`enter\` key.&#xA;- \`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.&#xA;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                                                                                                                                                                                       |

### TabsRootProviderProps

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

### TabsRootContextProps

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

### TabsListProps

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

### TabsTriggerProps

| Property  | Default | 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 |

### TabsIndicatorProps

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

### TabsContentProps

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