Forms

Switch

A toggle switch for boolean values. Supports labels, descriptions, checked/unchecked icons, colors, sizes, and loading states.

Playground

Experiment with different props in real-time.

Enable feature

Toggle this feature on or off

Color

Size

Disabled

Basic Usage

<script lang="ts">
  import { Switch } from 'sv5ui';

  let enabled = $state(false);
</script>

<Switch bind:checked={enabled} />

Label & Description

Add context with label and description props.

Push Notifications

Receive alerts when someone mentions you.

Dark Mode

Use dark theme across the application.

Usage Analytics

Help us improve by sending anonymous usage data.

<Switch
  bind:checked={notifications}
  label="Push Notifications"
  description="Receive alerts when someone mentions you."
/>

<Switch
  bind:checked={darkMode}
  label="Dark Mode"
  description="Use dark theme across the application."
/>

<Switch
  bind:checked={analytics}
  label="Usage Analytics"
  description="Help us improve by sending anonymous usage data."
/>

Sizes

5 sizes.

<Switch size="xs" label="Extra Small" bind:checked={xs} />
<Switch size="sm" label="Small" bind:checked={sm} />
<Switch size="md" label="Medium" bind:checked={md} />
<Switch size="lg" label="Large" bind:checked={lg} />
<Switch size="xl" label="Extra Large" bind:checked={xl} />

Colors

8 semantic color schemes.

Primary

Secondary

Tertiary

Success

Warning

Error

Info

Surface

<Switch color="primary" label="Primary" checked />
<Switch color="secondary" label="Secondary" checked />
<Switch color="tertiary" label="Tertiary" checked />
<Switch color="success" label="Success" checked />
<Switch color="warning" label="Warning" checked />
<Switch color="error" label="Error" checked />
<Switch color="info" label="Info" checked />
<Switch color="surface" label="Surface" checked />

With Icons

Show different icons for checked/unchecked states.

Wi-Fi

Sound

Visibility

<Switch
  bind:checked={wifi}
  label="Wi-Fi"
  checkedIcon="lucide:wifi"
  uncheckedIcon="lucide:wifi-off"
/>

<Switch
  bind:checked={sound}
  label="Sound"
  checkedIcon="lucide:volume-2"
  uncheckedIcon="lucide:volume-x"
/>

<Switch
  bind:checked={visibility}
  label="Visibility"
  checkedIcon="lucide:eye"
  uncheckedIcon="lucide:eye-off"
/>

Loading

Syncing settings...

Connecting...

<Switch label="Syncing settings..." loading checked />
<Switch label="Connecting..." loading />

Disabled

Enabled (disabled)

Disabled (disabled)

<Switch label="Enabled (disabled)" checked disabled />
<Switch label="Disabled (disabled)" disabled />

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Outermost wrapper`
`base`	`Switch track`
`container`	`Track container`
`thumb`	`Sliding thumb`
`icon`	`Icon inside thumb`
`wrapper`	`Label/description wrapper`
`label`	`Label text`
`description`	`Description text`

Custom Styled

With overridden slot classes

<Switch
  label="Custom Styled"
  description="With overridden slot classes"
  checked
  ui={{
    base: 'bg-success',
    thumb: 'bg-white shadow-lg',
    label: 'font-bold tracking-wide',
    description: 'italic'
  }}
/>

Snippets

Snippet	Description
`labelSlot`	`Custom label rendering`
`descriptionSlot`	`Custom description rendering`

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	`Whether switch is on (bindable)`
`onCheckedChange`	`(checked) => void`	`-`	`Callback on change`
`color`	`ColorType`	`'primary'`	`Color scheme`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Switch size`
`label`	`string`	`-`	`Label text`
`description`	`string`	`-`	`Description below label`
`checkedIcon`	`string`	`-`	`Icon when checked`
`uncheckedIcon`	`string`	`-`	`Icon when unchecked`
`loading`	`boolean`	`false`	`Show loading spinner`
`loadingIcon`	`string`	`icons.loading`	`Custom loading icon`
`disabled`	`boolean`	`false`	`Disable switch`
`required`	`boolean`	`false`	`Required for forms`
`id`	`string`	`-`	`HTML id`
`name`	`string`	`-`	`Form field name`
`value`	`string`	`-`	`Form value`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Slider Textarea