Switch

Radix switch with a sketch pill track and a circular thumb that slides. Toggling springs the thumb and re-inks the track with a second seed.

Keep the wobble

Roughness1.5Lock seedAnimate

<Switch label="Keep the wobble" defaultChecked roughness={1.5} />

CLI install

npx doodleui-react add switch

import { Switch } from "doodleui-react";

<Switch label="Keep the wobble" defaultChecked />

Checked state, keyboard, and aria-checked come from Radix. doodle-ui draws the track and thumb.

Prop	Type	Default	Notes
label	ReactNode	undefined	Caption sitting to the right of the track.
checked / onCheckedChange	boolean / (checked: boolean) => void	uncontrolled	Radix controlled API.
animate	boolean	true	Thumb slides with a spring. Track seed-morphs on toggle. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.