Checkbox

Radix checkbox with a sketch square. The checkmark is a rough.js path, not a font glyph.

Keep the wobble

Roughness1.5Lock seed

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

Usage

import { Checkbox } from "doodleui-react";

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

Keyboard, mixed state, and aria-checked come from Radix. doodle-ui only skins the box.

Prop	Type	Default	Notes
label	ReactNode	undefined	Caption sitting to the right of the box.
checked	boolean \| 'indeterminate'	undefined	Radix controlled value.
onCheckedChange	(checked: boolean \| 'indeterminate') => void	undefined	Radix change handler.
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.