Switch Component

Sizes

Small

Medium

Large

States

Checked

Unchecked

Disabled

Disabled Off

Variants

Default (iOS-style)

Outline Variant

Minimal Variant

Neumorphism (NEO)

Glow / Neon Variant

Without Labels

Usage Examples

Basic Switch

const [checked, setChecked] = useState(false);

<Switch checked={checked} onChange={setChecked} />

Switch with Label

<Switch checked={checked} onChange={setChecked} label="Enable notifications" />

Different Sizes

<Switch checked={checked} onChange={setChecked} size="sm" />
<Switch checked={checked} onChange={setChecked} size="md" />
<Switch checked={checked} onChange={setChecked} size="lg" />

Switch Variants

<Switch variant="default" checked={checked} onChange={setChecked} />
<Switch variant="outline" checked={checked} onChange={setChecked} />
<Switch variant="minimal" checked={checked} onChange={setChecked} />
<Switch variant="neo" checked={checked} onChange={setChecked} />
<Switch variant="glow" checked={checked} onChange={setChecked} />