Switch

The background colors of the switch can be changed with the background and activeBackground props.

Labels can be changed through the label prop. You can also hide labels by setting hideLabel to true. Hidden labels will still be available to screen readers.

<ToggleSwitch bind:checked label="dark / light" hideLabel={true} />

You can add both an active icon and in-active icon to the switch. This is especially a good idea for when you want to hide the label.

<Switch
    label="dark / light"
    activeIcon="text-surface-900 text-lg i-material-symbols-clear-day-rounded"
    inactiveIcon="text-surface-900 text-lg i-material-symbols-dark-mode-rounded"
/>

Props

Switch

   
label
:
  string
Set the toggle text.

name

string

The name of the hidden input element used for form submission.

required

boolean

false

Whether or not the input is required.

hideLabel

boolean

false

Define if the label should be hidden. It will still be available for screen readers.

labelPosition

'left'

Set the label position (left or right).

checked

boolean

false

Bind to the checked status of the switch.

disabled

boolean

false

Define whether or not the switch is disabled.

size

'md'

Set the size of the toggle switch. Options: 'sm' | 'md' | 'lg'.

labelStyles

string

'px-2 text-surface-900-50'

Set label styles.

background

string

'bg-surface-300-400'

Set the in-active background classes.

activeBackground

string

'bg-primary-500'

Set the active background classes.

inactiveIcon

string

Set the inactive icon (optional). You can also set the icon size and color here. Example: "text-surface-900 text-lg i-material-symbols-dark-mode-rounded".

activeIcon

string

Set the active icon (optional). You can also set the icon size and color here. Example: "text-surface-900 text-lg i-material-symbols-clear-day-rounded".

Switch

Colors

Label

Sizes

Icons

API

Props

Switch