---
components: ["ContentSwitcher", "Switch"]
---

<script>
  import { ContentSwitcher, Switch } from "carbon-components-svelte";
  import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`ContentSwitcher` lets users switch between different views or sections of content. Use it to organize related content into distinct categories or states.

## Default

Create a content switcher with `Switch` components. Each switch needs a `text` prop.

<ContentSwitcher>
  <Switch text="Latest news" />
  <Switch text="Trending" />
</ContentSwitcher>

## Initial selected index

Set `selectedIndex` to pre-select a switch when the content switcher loads.

<ContentSwitcher selectedIndex={1}>
  <Switch text="Latest news" />
  <Switch text="Trending" />
  <Switch text="Recommended" />
</ContentSwitcher>

## Reactive example

This example demonstrates how to programmatically control the content switcher using
the `bind:selectedIndex` directive. Update the selected index based on user
interactions or application state.

<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />

## Custom switch slot

Override the default slot in `Switch` to customize how each option displays.

<ContentSwitcher>
  <Switch>
    <div style="display: flex; align-items: center;">
      <Bullhorn style="margin-right: 0.5rem;" /> Latest news
    </div>
  </Switch>
  <Switch>
    <div style="display: flex; align-items: center;">
      <Analytics style="margin-right: 0.5rem;" /> Trending
    </div>
  </Switch>
</ContentSwitcher>

## Extra-large size

Set `size` to `"xl"` for an extra-large content switcher.

<ContentSwitcher size="xl">
  <Switch text="All" />
  <Switch text="Archived" />
</ContentSwitcher>

## Small size

Set `size` to `"sm"` for a small content switcher.

<ContentSwitcher size="sm">
  <Switch text="All" />
  <Switch text="Archived" />
</ContentSwitcher>

## Disabled

Set `disabled` to `true` on individual switches to prevent interaction.

<ContentSwitcher>
  <Switch disabled text="All" />
  <Switch disabled text="Archived" />
</ContentSwitcher>