# Tabs Documentation Organizes content into tabbed sections. 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. Copy Page ```svelte

Outbound Inbound

Prague

06:05

3h 30m

Malaga

06:05

Malaga

07:25

3h 20m

Prague

10:45

``` ## Structure ```svelte ``` ## 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 ``` ### 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 ``` ## 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 ``` ## 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 ``` ## API Reference ### Tabs.Root The root tabs component which contains the other tab components. | Property | Type | Description | Details | | ----------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `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: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------ | ----------------------------------- | ---------------------------- | ------- | | `data-orientation` | `enum` - 'horizontal' \| 'vertical' | The orientation of the tabs. | | | `data-tabs-root` | `''` | Present on the root element. | | ### Tabs.List The component containing the tab triggers. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------ | ----------------------------------- | ---------------------------- | ------- | | `data-orientation` | `enum` - 'horizontal' \| 'vertical' | The orientation of the tabs. | | | `data-tabs-list` | `''` | Present on the list element. | | ### Tabs.Trigger The trigger for a tab. | Property | Type | Description | Details | | ---------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `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: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------- | ----------------------------------- | --------------------------------------------- | ------- | | `data-state` | `enum` - 'active' \| 'inactive' | The state of the tab trigger. | | | `data-value` | `''` | The value of the tab this trigger represents. | | | `data-orientation` | `enum` - 'horizontal' \| 'vertical' | 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 | Details | | ---------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `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: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------- | ----- | -------------------------------- | ------- | | `data-tabs-content` | `''` | Present on the content elements. | | [Previous Switch](/docs/components/switch) [Next Time Field](/docs/components/time-field)