Forms

Switch

A toggle control for binary settings. Use switches for immediate state changes like enabling features, toggling preferences, or activating modes.

Playground

Experiment with different props in real-time.

Enable notifications

Color

Size

Label

Disabled

Basic Usage

Import and use the Switch component with bind:checked for two-way binding.

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

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

<Switch bind:checked={enabled} />

With Label & Description

Add a label and description to provide context for the setting.

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 from extra small to extra large.

Extra Small

Small

Medium

Large

Extra Large

<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, visible when the switch is checked.

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

Display icons on the thumb for checked and unchecked states using Iconify names.

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

Show a loading spinner on the thumb while an async operation is in progress.

Syncing settings...

Connecting...

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

Disabled

Prevent interaction while preserving the current state.

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 specific internal elements of the Switch.

Slot	Description
`root`	Outermost wrapper — controls overall layout and spacing
`base`	Switch track element — controls track shape, background, border
`container`	Inner container wrapping the track and thumb
`thumb`	The sliding circle — controls thumb size, shadow, position
`wrapper`	Wrapper around label and description text
`label`	Label text element — controls font, weight, color
`description`	Description text element — controls helper text styles
`icon`	Icon inside the thumb — controls icon size and color

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

Use snippets to customize label and description rendering.

Snippet	Args	Description
`labelSlot`	`{ label }`	Custom label rendering
`descriptionSlot`	`{ description }`	Custom description rendering

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the switch is on. Supports bind:checked
`onCheckedChange`	`(checked: boolean) => void`	`-`	Callback fired when checked state changes
`color`	`Color`	`'primary'`	Color scheme of the switch
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the switch
`loading`	`boolean`	`false`	Show loading spinner on the thumb
`loadingIcon`	`string`	`icons.loading`	Custom icon for the loading spinner
`checkedIcon`	`string`	`-`	Iconify icon name shown when checked
`uncheckedIcon`	`string`	`-`	Iconify icon name shown when unchecked
`label`	`string`	`-`	Label text displayed beside the switch
`description`	`string`	`-`	Helper text displayed below the label
`id`	`string`	`-`	HTML id attribute for the input
`name`	`string`	`-`	HTML name attribute for form submission
`value`	`string`	`-`	Value attribute for form submission
`disabled`	`boolean`	`false`	Disable the switch
`required`	`boolean`	`false`	Mark as required for form validation
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal elements

Slider Textarea