Switch - Spektral UI

Switch

Size

Circle

Background

Svelte

<script lang="ts">
    let wifi_on: boolean = $state(true);
</script>

<Switch bind:checked={wifi_on} palette="accent" /> 

API

Prop	Type	Default
checked	`boolean`	`false`
palette	`"accent" \| "tone" \| "neutral" \| "error" \| "warning" \| "success" \| "info"`	`"accent"`
size	`"sm" \| "md" \| "lg"`	`"md"`
circle	`boolean`	`true`
leading	`Snippet`	`—`
trailing	`Snippet`	`—`
disabled	`boolean`	`false`
aria_label	`string`	`—`

Prop checked

Type boolean

Default false

Prop palette

Type "accent" | "tone" | "neutral" | "error" | "warning" | "success" | "info"

Default "accent"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop circle

Type boolean

Default true

Prop leading

Type Snippet

Default —

Prop trailing

Type Snippet

Default —

Prop disabled

Type boolean

Default false

Prop aria_label

Type string

Default —