Toggle Switch
toggle-switchControlsRocker, stomp or hardware lever with a satisfying pressed state.
$ pnpm dlx shadcn@latest add @pluginui/core-toggle-switchLoading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-toggle-switch.jsonUsage
Connect the documented props to your application or host.
import { ToggleSwitch } from "@/components/ui/toggle-switch"
<ToggleSwitch
label="Drive"
variant="stomp"
defaultChecked
onChange={(on) => param.set("drive", on)}
/>About Toggle Switch
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.
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
sliderandswitchroles with livearia-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.