# Tabs Documentation

Organizes content into distinct sections, allowing users to switch between them.

This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue.

```svelte
<script lang="ts">
  import { Tabs } from "bits-ui";
  import Airplane from "phosphor-svelte/lib/Airplane";
</script>
<div class="pt-6">
  <Tabs.Root
    value="outbound"
    class="rounded-card border-muted bg-background-alt shadow-card w-[390px] border p-3"
  >
    <Tabs.List
      class="rounded-9px bg-dark-10 shadow-mini-inset dark:bg-background grid w-full grid-cols-2 gap-1 p-1 text-sm font-semibold leading-[0.01em] dark:border dark:border-neutral-600/30"
    >
      <Tabs.Trigger
        value="outbound"
        class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
        >Outbound</Tabs.Trigger
      >
      <Tabs.Trigger
        value="inbound"
        class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
        >Inbound</Tabs.Trigger
      >
    </Tabs.List>
    <Tabs.Content value="outbound" class="select-none pt-3">
      <div class="grid grid-cols-3 grid-rows-2 gap-0 p-4 pb-1">
        <div class="text-left">
          <h4
            class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]"
          >
            Prague
          </h4>
          <p class="text-muted-foreground text-sm font-medium">06:05</p>
        </div>
        <div class="self-end text-center">
          <p class="text-muted-foreground text-sm font-medium">3h 30m</p>
        </div>
        <div class="text-right">
          <h4
            class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]"
          >
            Malaga
          </h4>
          <p class="text-muted-foreground text-sm font-medium">06:05</p>
        </div>
        <div class="relative col-span-3">
          <hr
            class="border-1 border-border-input relative top-4 h-px border-dashed"
          />
          <div class="bg-background-alt absolute left-1/2 -translate-x-1/2 p-1">
            <Airplane class="text-muted-foreground size-6 rotate-90" />
          </div>
        </div>
      </div>
    </Tabs.Content>
    <Tabs.Content value="inbound" class="select-none pt-3">
      <div class="grid grid-cols-3 grid-rows-2 gap-0 p-4 pb-1">
        <div class="text-left">
          <h4
            class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]"
          >
            Malaga
          </h4>
          <p class="text-muted-foreground text-sm font-medium">07:25</p>
        </div>
        <div class="self-end text-center">
          <p class="text-muted-foreground text-sm font-medium">3h 20m</p>
        </div>
        <div class="text-right">
          <h4
            class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]"
          >
            Prague
          </h4>
          <p class="text-muted-foreground text-sm font-medium">10:45</p>
        </div>
        <div class="relative col-span-3">
          <hr
            class="border-1 border-border-input relative top-4 h-px border-dashed"
          />
          <div class="bg-background-alt absolute left-1/2 -translate-x-1/2 p-1">
            <Airplane class="text-muted-foreground size-6 rotate-90" />
          </div>
        </div>
      </div>
    </Tabs.Content>
  </Tabs.Root>
</div>
```

## Structure

```svelte
<script lang="ts">
 import { Tabs } from "bits-ui";
</script>
<Tabs.Root>
 <Tabs.List>
  <Tabs.Trigger />
 </Tabs.List>
 <Tabs.Content />
</Tabs.Root>
```

## Managing Value State

This section covers how to manage the `value` state of the component.

### Two-Way Binding

Use `bind:value` for simple, automatic state synchronization:

```svelte
<script lang="ts">
 import { Tabs } from "bits-ui";
 let myValue = $state("");
</script>
<button onclick={() => (myValue = "tab-1")}> Activate tab 1 </button>
<Tabs.Root bind:value={myValue}>
</Tabs.Root>
```

### Fully Controlled

Use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) for complete control over the state's reads and writes.

```svelte
<script lang="ts">
 import { Tabs } from "bits-ui";
 let myValue = $state("");
 function getValue() {
  return myValue;
 }
 function setValue(newValue: string) {
  myValue = newValue;
 }
</script>
<Tabs.Root bind:value={getValue, setValue}>
</Tabs.Root>
```

## Orientation

The `orientation` prop is used to determine the orientation of the `Tabs` component, which influences how keyboard navigation will work.

When the `orientation` is set to `'horizontal'`, the `ArrowLeft` and `ArrowRight` keys will move the focus to the previous and next tab, respectively. When the `orientation` is set to `'vertical'`, the `ArrowUp` and `ArrowDown` keys will move the focus to the previous and next tab, respectively.

```svelte
<Tabs.Root orientation="horizontal">
</Tabs.Root>
<Tabs.Root orientation="vertical">
</Tabs.Root>
```

## Activation Mode

By default, the `Tabs` component will automatically activate the tab associated with a trigger when that trigger is focused. This behavior can be disabled by setting the `activationMode` prop to `'manual'`.

When set to `'manual'`, the user will need to activate the tab by pressing the trigger.

```svelte
<Tabs.Root activationMode="manual">
</Tabs.Root>
```

## API Reference

### Tabs.Root

The root tabs component which contains the other tab components.

| Property                                                                                      | Type                                                                                                                                                                                                                            | Description                                                                                                                                                                                                                                                    |
| -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` $bindable | `string`                                                                                                                                                                                              | The active tab value.`Default:  undefined`                                                                                                                                                                                    |
| `onValueChange`                                             | `function`- (value: string) => void                                  | A callback function called when the active tab value changes.`Default:  undefined`                                                                                                                                            |
| `activationMode`                                            | `enum`- 'automatic' \| 'manual'                                      | How the activation of tabs should be handled. If set to `'automatic'`, the tab will be activated when the trigger is focused. If set to `'manual'`, the tab will be activated when the trigger is pressed.`Default: 'automatic'` |
| `disabled`                                                  | `boolean`                                                                                                                                                                                             | Whether or not the tabs are disabled.`Default: false`                                                                                                                                                                            |
| `loop`                                                      | `boolean`                                                                                                                                                                                             | Whether or not the tabs should loop when navigating with the keyboard.`Default: true`                                                                                                                                            |
| `orientation`                                               | `enum`- 'horizontal' \| 'vertical'                                   | The orientation of the tabs.`Default: horizontal`                                                                                                                                                                                |
| `ref` $bindable                                | `HTMLDivElement`                                                                                                                                                                                      | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default:  undefined`                                                                                                       |
| `children`                                                  | `Snippet`                                                                                                                                                                                             | The children content to render.`Default:  undefined`                                                                                                                                                                          |
| `child`                                                     | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default:  undefined`                                                | | Data Attribute                                   | Value                                                                                                                                                         | Description                                                                                     |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `data-orientation` | `enum`- '' | The orientation of the tabs.                                             |
| `data-tabs-root`                                        | `''`                                                                                                                                                 | Present on the root element. |

### Tabs.List

The component containing the tab triggers.

| Property                                                                                    | Type                                                                                                                                                                                                                            | Description                                                                                                                                                                                                     |
| ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ref` $bindable | `HTMLDivElement`                                                                                                                                                                                      | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default:  undefined`                                                        |
| `children`                                                | `Snippet`                                                                                                                                                                                             | The children content to render.`Default:  undefined`                                                                                                                           |
| `child`                                                   | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default:  undefined` | | Data Attribute                                   | Value                                                                                                                                                         | Description                                                                                     |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `data-orientation` | `enum`- '' | The orientation of the tabs.                                             |
| `data-tabs-list`                                        | `''`                                                                                                                                                 | Present on the list element. |

### Tabs.Trigger

The trigger for a tab.

| Property                                                                                     | Type                                                                                                                                                                                                                            | Description                                                                                                                                                                                                     |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` required | `string`                                                                                                                                                                                              | The value of the tab this trigger represents.`Default:  undefined`                                                                                                             |
| `disabled`                                                 | `boolean`                                                                                                                                                                                             | Whether or not the tab is disabled.`Default: false`                                                                                                                               |
| `ref` $bindable                               | `HTMLButtonElement`                                                                                                                                                                                   | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default:  undefined`                                                        |
| `children`                                                 | `Snippet`                                                                                                                                                                                             | The children content to render.`Default:  undefined`                                                                                                                           |
| `child`                                                    | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default:  undefined` | | Data Attribute                             | Value                                                                                                                                                         | Description                                                                                         |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-state` | `enum`- '' | The state of the tab trigger.                                                |
| `data-value`                                      | `''`                                                                                                                                                 | The value of the tab this trigger represents.                                |
| `data-orientation`                                | `enum`- '' | The orientation of the tabs.                                                 |
| `data-disabled`                                   | `''`                                                                                                                                                 | Present when the tab trigger is disabled.                                    |
| `data-tabs-trigger`                               | `''`                                                                                                                                                 | Present on the trigger elements. |

### Tabs.Content

The panel containing the contents of a tab.

| Property                                                                                     | Type                                                                                                                                                                                                                            | Description                                                                                                                                                                                                     |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` required | `string`                                                                                                                                                                                              | The value of the tab this content represents.`Default:  undefined`                                                                                                             |
| `ref` $bindable                               | `HTMLDivElement`                                                                                                                                                                                      | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default:  undefined`                                                        |
| `children`                                                 | `Snippet`                                                                                                                                                                                             | The children content to render.`Default:  undefined`                                                                                                                           |
| `child`                                                    | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default:  undefined` | | Data Attribute                                    | Value         | Description                                                                                         |
| ------------------------------------------------------------------------------------ | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-tabs-content` | `''` | Present on the content elements. |