Terms of use
1. You can use what you make here in personal and client work.
2. Please don't resell the components themselves.
3. We may update these terms, and we will tell you when we do.
4. That's all. Thanks for reading to the end.
Sweep
Press and drag down the boxes
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initCbSweep(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-sweepAbout this component
Press on a box and drag down the column: every box you pass takes the same state, ticked or cleared, like painting. Works with a finger too.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- Click
- State change
- Mouse tracking
Techniques2
- Event position
- Keyframes
Accessibility
Keyboard and screen readers
Every row is a native checkbox inside a <label>, in a role="group" with a name, so Tab and Space work one box at a time.
Reduced motion
The boxes do not pop.
Use it in anything you build, commercial and client work included. Licence