Syntho

Toggle Switch

toggle-switchControls

On-off in three shapes from one component. 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 wears any of the kit's shared skins, so a vintage stomp is the same cream as a vintage knob. All are real buttons underneath — behaviour comes from ToggleHeadless — so Space and Enter work and the pressed state shows for keyboard users too.

Bypass
ON
Drive
OFF
Sync
ON
flat
vintage
minimal
neon

Install

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

$ npx shadcn add @syntho-ui/toggle-switch

Pulls in

toggle-headlesscontrol-labelcontrol-themecontrol-skin

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

components.json
{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

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

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

Props

PropTypeDefaultDescription
checkedboolean—Controlled state. Omit for uncontrolled operation.
defaultCheckedbooleanfalseInitial 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.
labelstring—Caption above the switch.
onLabel / offLabelstring"ON" / "OFF"Readout text for each state.
sizenumber1Scale multiplier applied to the switch geometry.
iconReactNode—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 controlsStart building