PlumUI

Switch

A toggle for instant settings. The thumb stretches while pressed and settles on a spring curve.

InputsRadix Switch

Playground

Tweak the props, the preview and the code follow.

Props
<div className="flex items-center gap-2.5">
  <Switch id="airplane" defaultChecked />
  <Label htmlFor="airplane">Airplane mode</Label>
</div>

Installation

npx @plumsydev/plum-ui add switch

Also pulls in label automatically.

Usage

import { Switch } from "@/components/ui/switch"
<Switch defaultChecked />

Examples

Sizes

Settings list

API Reference

Switch

Extends Radix Switch.Root.

PropTypeDefault
size

Track and thumb size.

"sm" | "default" | "lg""default"
checked

Controlled state.

boolean—
defaultChecked

Uncontrolled initial state.

booleanfalse
onCheckedChange

Called when toggled.

(checked: boolean) => void—

Notes

  • The spring is pure CSS (ease-spring, a linear() easing), so it costs nothing at runtime.
PreviousStepperNextTable