Toggle Switch

toggle-switchControls

One component provides on-off controls in three shapes. The rocker slides, the stomp depresses under the pointer and carries a status LED, and the lever throws vertically through a recessed metal slot. Shape and finish are independent: any shape can use any shared kit skin, so a vintage stomp matches a vintage knob. All three are real buttons built on ToggleHeadless, so Space and Enter work and keyboard users can see the pressed state.

Bone / Studio

Loading interactive preview…

Planar / Flat

Loading interactive preview…

Midnight / Minimal

Loading interactive preview…

Ember / Vintage

Loading interactive preview…

Ink / Studio

Loading interactive preview…

Mint / Flat

Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it.

$ pnpm dlx shadcn@latest add @pluginui/core-toggle-switch

Pulls in

toggle-headlesscontrol-labelcontrol-themecontrol-skin

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@pluginui": "https://pluginui.com/r/{name}.json"
  }
}

Usage

Connect the documented props to your application or host.

example.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

<ToggleSwitch
  label="Drive"
  variant="stomp"
  defaultChecked
  onChange={(on) => param.set("drive", on)}
/>

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled state. Omit for uncontrolled operation.
defaultChecked	boolean	false	Initial state when uncontrolled.
onChange	(checked: boolean) => void	—	Fires on every toggle.
variant	"rocker" \| "stomp" \| "lever"	"rocker"	The switch's shape. Independent of skin, which is its finish.
skin	"default" \| "flat" \| "vintage" \| "minimal" \| "neon"	"default"	Visual finish, shared with every other control in the kit. Any shape takes any skin: flat drops the moulding, vintage puts a cream face on the moving part, and neon keeps a halo even in the off position. Omitted, the switch takes whatever a surrounding ControlSkinProvider declares.
label	string	—	Caption above the switch.
onLabel / offLabel	string	"ON" / "OFF"	Readout text for each state.
size	number	1	Scale multiplier applied to the switch geometry.
icon	ReactNode	—	Glyph inside a stomp switch. Defaults to a power symbol.

Interaction

Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
Double-click resets to defaultValue.
Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.

All controls Start building