Switch

A toggle switch for boolean settings, supporting controlled and uncontrolled modes with multiple sizes and colors.

Basic

With Labels

Sizes

Colors

With Thumb Icon

Display an icon inside the switch thumb that reflects the toggle state.

With Description

Add descriptive text below the label for additional context.

Controlled

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the switch is on (controlled).
`defaultChecked`	`boolean`	`false`	The initial on/off state (uncontrolled).
`onCheckedChange`	`(checked: boolean) => void`	—	Called when the switch state changes.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color when the switch is on.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset.
`label`	`string`	—	Label text displayed next to the switch.
`disabled`	`boolean`	`false`	Disables the switch.
`description`	`ReactNode`	—	Description text displayed below the label.
`thumbIcon`	`ReactNode`	—	Icon displayed inside the switch thumb.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

checked

boolean

Whether the switch is on (controlled).

defaultCheckedfalse

boolean

The initial on/off state (uncontrolled).

onCheckedChange

(checked: boolean) => void

Called when the switch state changes.

color"blue"

Accent color when the switch is on.

size"md"

"sm" | "md" | "lg"

Size preset.

label

string

Label text displayed next to the switch.

disabledfalse

boolean

Disables the switch.

description

ReactNode

Description text displayed below the label.

thumbIcon

ReactNode

Icon displayed inside the switch thumb.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}