Gesture
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initCbGesture(el) on the mounted element instead.
HTML
CSS
JavaScript
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/checkbox-gestureAbout this component
Draw a tick in the box with your pointer and it is checked, your stroke tidying into a clean tick; scribble over it to clear it. A plain click still works.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers4
- Click
- State change
- Draw
- Mouse tracking
Techniques3
- Event position
- SVG stroke
- stroke-dashoffset
Accessibility
Keyboard and screen readers
A native checkbox in a <label>: click, tap or Space toggles it as usual, so drawing is never required. The drawing hint is aria-hidden so it stays out of the name.
Reduced motion
There is no shake and the tick appears at once.
Use it in anything you build, commercial and client work included. Licence