Switch

Toggle a setting on or off.

stableBase UI Switch

Preview

Auto-refresh feeds

Telemetry sync (locked)

Code

tsx

import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";

export function Example() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Switch id="autorefresh" defaultChecked />
        <Label htmlFor="autorefresh">Auto-refresh feeds</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id="locked" defaultChecked disabled />
        <Label htmlFor="locked" className="text-fg-muted">
          Telemetry sync (locked)
        </Label>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
checked	`boolean`	—	Controlled checked state.
defaultChecked	`boolean`	—	Uncontrolled initial state.
onCheckedChange	`(checked: boolean) => void`	—	Called when toggled.
disabled	`boolean`	false	Disables interaction.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Built on Base UI Switch (`role="switch"`). Use for settings that take effect immediately. For form-submit values, prefer Checkbox.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/switch.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

"use client";

import { cn } from "@/lib/utils";
import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
import type { ComponentPropsWithoutRef } from "react";

export function Switch({ className, ...props }: ComponentPropsWithoutRef<typeof BaseSwitch.Root>) {
  return (
    <BaseSwitch.Root
      className={cn(
        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
        "bg-bg-muted data-[checked]:bg-accent",
        "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
        className,
      )}
      {...props}
    >
      <BaseSwitch.Thumb
        className={cn(
          // Hairline border defines the thumb edge in both modes — the surface
          // fill flips dark in dark mode and would otherwise blend into the track.
          "pointer-events-none block h-4 w-4 rounded-full border border-border-strong bg-surface shadow-sm transition-transform",
          "translate-x-0 data-[checked]:translate-x-4",
        )}
      />
    </BaseSwitch.Root>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmSwitch (extends ToggleButton). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmSwitch;

PrizmSwitch()
PrizmSwitch(boolean selected)

Prop	Type	Default	Description
selected	`BooleanProperty`	false	On/off state (inherited from ToggleButton); the thumb slides on change.
disabled	`BooleanProperty`	false	Inherited from Node; dims the track via the :disabled pseudo-class.

JavaFX has no stock switch, so PrizmSwitch is a ToggleButton restyled as a track + sliding thumb (PrizmSwitchSkin), styled by the .prizm-switch rules in prizm.css. Carries no label text — pair it with a PrizmLabel / PrizmField. Accessible role is TOGGLE_BUTTON (JavaFX has no SWITCH role). Mirrors components/ui/switch.tsx.