Switch

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

Turn motion on or off withfor this workspace.

Installation

npx shadcn@latest add @iconiq/r-switch

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Turn motion on or off withfor this workspace.

Props

Switch

7 props

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"

Defaultright

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.

Notes

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.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.