Switch

A toggle control that switches between on and off.

The Switch toggles a setting on or off. Built on Radix UI with full keyboard support.

Preview

import React from "react";
import { Switch } from "@/registry/spark-ui/switch";

export default function SwitchDemo() {
  return (
    <div className="flex items-center justify-center gap-2 p-4">
      <Switch id="airplane-mode" />
      <label htmlFor="airplane-mode" className="text-sm font-medium">
        Airplane mode
      </label>
    </div>
  );
}

Airplane mode

Usage

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/switch.json

Properties

Prop	Type	Default	Description
`checked`	`boolean`	`—`	Controlled checked state.
`onCheckedChange`	`(checked: boolean) => void`	`—`	Called when the checked state changes.
`disabled`	`boolean`	`false`	Disables the switch.
`className`	`string`	`—`	Additional CSS classes.