Switch

In the app

On or off, applied now. 38 by 22 with an 8px radius, accent when on, and the thumb travels 16px on the house curve.

@varick/ui/components/switchAdded 2 Sept 2026

Auto-approve under $5k Notify on failure

Usage

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

export function Example() {
  return <Switch checked={enabled} onCheckedChange={setEnabled} />;
}

Variants

Sizes and states

<Switch defaultChecked />
<Switch />
<Switch size="sm" defaultChecked />
<Switch disabled defaultChecked />

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
checked	boolean	uncontrolled	Controlled state, with onCheckedChange.
defaultChecked	boolean	false	Initial state when uncontrolled.
size	'sm' \| 'md'	'md'	30 by 18, or the app’s 38 by 22.
disabled	boolean	false	Dims and ignores clicks.

Accessibility

role="switch" with aria-checked. Use a Switch only when the change applies immediately; otherwise it is a Checkbox.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.toggle-switch {
  width: 38px;
  height: 22px;
  border-radius: 8px;
  background: var(--fill);
  border: 1px solid var(--hairline);
  position: relative;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.toggle-switch .toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 160ms var(--ease-out);
}
.toggle-switch.on { background: var(--accent); border-color: var(--accent); }
.toggle-switch.on .toggle-thumb { transform: translateX(16px); }