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

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

## Default

<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, the width of each tab is set to `10rem`.

Set `autoWidth` to `true` for tabs to have an automatically set width.

<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

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

## Disabled tabs

Setting `disabled` to `true` on the `Tab` component will prevent it from being clickable.

Using keyboard navigation (left and right arrow keys) will skip to the next non-disabled tab.

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

## Contained

<Tabs contained>
  <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)

<TabsSkeleton count={3} />

## Skeleton (contained)

<TabsSkeleton contained count={3} />