mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
37 lines
778 B
Svelte
37 lines
778 B
Svelte
<script lang="ts">
|
|
import { Toggle } from "carbon-components-svelte";
|
|
|
|
let toggled = false;
|
|
let initialToggled = true;
|
|
</script>
|
|
|
|
<Toggle
|
|
bind:toggled
|
|
labelText="Default toggle"
|
|
on:toggle={(e) => {
|
|
console.log("toggled:", e.detail.toggled);
|
|
}}
|
|
/>
|
|
|
|
<Toggle labelText="Custom labels" labelA="Inactive" labelB="Active" />
|
|
|
|
<Toggle size="sm" labelText="Small toggle" />
|
|
|
|
<Toggle disabled labelText="Disabled toggle" />
|
|
|
|
<Toggle
|
|
hideLabel
|
|
labelText="Hidden label toggle"
|
|
aria-label="Hidden label toggle"
|
|
/>
|
|
|
|
<Toggle
|
|
bind:toggled={initialToggled}
|
|
labelText="Initial toggled state"
|
|
name="test-toggle"
|
|
on:toggle={(e) => {
|
|
console.log("initial toggled:", e.detail.toggled);
|
|
}}
|
|
/>
|
|
|
|
<Toggle labelText="Custom name toggle" name="custom-name-toggle" />
|