Switch

On/off control for settings, preferences, and feature states.

Installation

npx shadcn@latest add @iconiq/r-switch

Props

Switch

Binary on or off control with the same Iconiq thumb travel, squash response, and foreground fill sweep layered over Radix UI primitives.

checkedboolean

Controlled checked state. Pass this when the parent owns the current on or off value.

defaultCheckedboolean

Initial checked state for uncontrolled usage. The component keeps its local animation state in sync with this mode too.

onCheckedChange(checked: boolean) => void

Called whenever the switch changes state, after the thumb and fill animation sequence starts.

disabledboolean

Disables pointer and keyboard interaction, and dims the switch and optional label together.

labelstring

Optional inline text rendered beside the switch. When omitted, the component returns only the switch control itself.

labelSide"left" | "right"

Default right

Controls which side of the switch the optional label text appears on.

classNamestring

Merged onto the Radix root element for local spacing or surface overrides.

Additional Radix switch props such as aria-label, name, value, required, and form are forwarded to the root control.

If you provide label, the component keeps the same adjacent text button treatment as the core switch so the label still toggles the control.

Motion and interaction behavior

The switch uses separate motion values for thumb travel, thumb squash, and track fill opacity so the state change feels tactile without becoming noisy.

Built on Radix switch root and thumb primitives while preserving the same motion values for thumb travel, thumb squash, and track fill opacity as the core switch.

Pointer press slightly flattens the thumb before release, then the thumb snaps back with a softer bounce after the state change.

The dark foreground fill fades in as the thumb travels right, rather than swapping track color instantly.

Controlled and uncontrolled usage both keep the thumb animation synchronized with the underlying Radix state.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-switch, motion.

Installs a Radix switch with the same checked, defaultChecked, label, and labelSide API as the Base UI version.

Uses Radix switch primitives under the exact same Iconiq track, thumb, and press-motion shell as the core switch component.

The generated registry file is /r/r-switch.json.