---
components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
---

<script>
  import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`Tabs` provides a way to organize content into separate views that can be switched between. It supports keyboard navigation, disabled states, and various layout options.

## Default

Create a basic tab interface with labels and content.

<Tabs>
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" />
  <Tab label="Tab label 3" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
    <TabContent>Content 3</TabContent>
  </svelte:fragment>
</Tabs>

## Auto width

By default, each tab has a fixed width of `10rem`. Set `autoWidth` to `true` for tabs to automatically adjust their width based on content.

<Tabs autoWidth>
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" />
  <Tab label="Tab label 3" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
    <TabContent>Content 3</TabContent>
  </svelte:fragment>
</Tabs>

## Reactive example

Use `bind:selected` to create a two-way binding with the selected tab index. This allows you to programmatically control the selected tab and react to tab changes.

<FileSource src="/framed/Tabs/TabsReactive" />

## Disabled tabs

Set `disabled` to `true` on a `Tab` component to prevent interaction. Keyboard navigation will skip disabled tabs.

<Tabs>
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" disabled />
  <Tab label="Tab label 3" disabled />
  <Tab label="Tab label 4" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
    <TabContent>Content 3</TabContent>
    <TabContent>Content 4</TabContent>
  </svelte:fragment>
</Tabs>

## Container type

Use the container type for a more prominent tab interface.

<Tabs type="container">
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" />
  <Tab label="Tab label 3" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
    <TabContent>Content 3</TabContent>
  </svelte:fragment>
</Tabs>

## Skeleton (default)

Show a loading state with the default skeleton variant.

<TabsSkeleton count={3} />

## Skeleton (container)

Show a loading state with the container skeleton variant.

<TabsSkeleton type="container" count={3} />