Switch
A simple toggle switch component used for binary settings or preferences.
Props
Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | The current state of the switch. Supports $bindable. |
onclick | (event: Event, checked: boolean) => Promise<void> | required | Async callback triggered when the switch is toggled. |
disabled | boolean | false | If true, prevents user interaction. |
variant | string | '' | Custom CSS variant class. |
componentId | string | '' | The unique identifier for the component element. |
Samples
Basic Usage
A standard toggle switch for boolean states.
Status: Disabled
0
<script>1
import { Switch } from 'fluid-ui-svelte/components';2
let checked = $state(false);3
</script>4
5
<Switch 6
bind:checked 7
onclick={async () => {8
console.log('Toggled');9
}} 10
/>Disabled State
The switch can be disabled to prevent user interaction.
Off & Disabled
On & Disabled
0
<Switch disabled onclick={async () => {}} />1
<Switch checked disabled onclick={async () => {}} />