Skip to content

Switch

Settings that take effect immediately — Tor routing, Harbor Mode, hidden balances. The thumb travels on a heavy, high-mass spring so flipping a security setting feels deliberate, never twitchy. Anything requiring confirmation is a button, not a switch.

States

On/off/disabled are real props. Focus-visible is forced with static ring classes. The press-squish stretch is a live pointer state with no prop — press and hold the live specimens to see it.

Off (live)
On (live)
Focus-visible (forced)
Disabled — off
Disabled — on

Locked-on posture for guarantees the user cannot revoke.

Unlabeled

Row-level use; always ariaLabel.

import { Switch } from "@coldharbor/ui";

<Switch
  checked={torEnabled}
  onCheckedChange={setTorEnabled}
  label="Tor routing"
/>
  • --ch-primary
  • --ch-bg
  • --ch-fg
  • --ch-fg-muted
  • --ch-focus

Disabled refusal (live)

Pressing a disabled switch shakes the thumb — the control says no instead of silently ignoring you. Collapses under reduced motion.

Press the disabled control
<Switch checked={false} onCheckedChange={noop} disabled label="Cloud backup" />
  • --ch-primary
  • --ch-bg
  • --ch-fg
  • --ch-fg-muted
  • --ch-focus

Themes

Harbor Mode on, under all three layers.

  • --ch-primary
  • --ch-bg
  • --ch-fg
  • --ch-fg-muted
  • --ch-focus