DrawCheckbox

A native checkbox whose tick draws itself in.

Respect reduced motionKeep focus visibleNever animate for its own sake

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/draw-checkbox.json

React
import DrawCheckbox from "@/components/fx/draw-checkbox"

<DrawCheckbox label="Respect reduced motion" name="motion" defaultChecked />

A real <input type="checkbox">: forms, labels, keyboard and screen readers work exactly as usual.
Visible focus ring on the drawn box.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) switches state without drawing.

Prop	Type	Default	Description
label	ReactNode	—	Visible label.
...props	ComponentProps<'input'>	—	Any checkbox input prop: checked, onChange, name, disabled…