Switch

A Radix switch whose thumb stretches under a press and glides to the other side, for settings that take effect immediately.

When to use

• Instant on/off settings: pausing an idle project, notifications, feature flags.
• Lists of preferences where each row applies without a Save button.
• Not for choices applied only when a form is submitted; use Checkbox. Not for choosing between two named views; use SegmentedControl.

Usage

import { Switch } from "@/components/iris/switch/switch";
function PauseWhenIdle() {
  const [on, setOn] = React.useState(true);
  return h(Switch, { label: "Pause the project when idle", checked: on, onCheckedChange: setOn });
}

Props

Prop	Type	Default	Description
label	string	–	Text after the track, inside the button; also used as aria-label when none is given.
checked / defaultChecked	boolean	– / false	Controlled or initial state.
onCheckedChange	(checked: boolean) => void	–	Called on toggle.
disabled	boolean	–	Dims to 50% and blocks input.
...props	Radix Switch.Root props	–	name, value, required, id, className, ref, pointer and key handlers (composed, not replaced).

Notes

• role="switch" from Radix; Space and Enter toggle. The thumb stretches on pointer down or Space and does not stretch a second time on release.
• The travel is critically damped (no overshoot); reduced motion removes the stretch and the travel animation.
• Fixed 42 x 24px track, so nothing around the switch shifts. Reads --control-track, --control-track-hover, --control-on, --control-thumb, --control-thumb-on and the thumb shadow.