---
components: ["Toggle"]
---

<script>
  import { Toggle } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default (untoggled)

<Toggle labelText="Push notifications" />

## Toggled

<Toggle labelText="Push notifications" toggled />

## Reactive example

<FileSource src="/framed/Toggle/ToggleReactive" />

## on:toggle event

<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />

## Hidden label text

Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility.

<Toggle labelText="Push notifications" hideLabel />

## Custom labels

<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

## Disabled

<Toggle labelText="Push notifications" disabled />

## Small size

<Toggle size="sm" labelText="Push notifications" />