Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow.

How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/button, or use a direct registry URL from https://iconiqui.com/r/button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

Switch

Animated on or off switch with a spring-driven thumb, pressure-like press feedback, and an optional inline label for settings rows.

Open in

Installation

npx shadcn@latest add @iconiq/switch

Props

Switch

7 props

Binary on or off control built on Radix Switch, with a motion-driven thumb travel, foreground fill sweep, and optional inline label.

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 wraps the control in a native label element so clicking the text also toggles the switch.