mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
42 lines
899 B
Text
42 lines
899 B
Text
---
|
|
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" />
|