Order
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initCbOrder(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-orderAbout this component
Rank your picks: each box you tick shows its place (1, 2, 3) instead of a tick, and unticking one moves the later picks up a place, their numbers rolling over.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- Click
- State change
- Keyframe
Techniques2
- Keyframes
- State machine
Accessibility
Keyboard and screen readers
A fieldset with a legend; each option is a native checkbox whose aria-label carries its place ("Offline sync, your 2nd choice"), so the rank is announced as well as shown.
Reduced motion
The numbers change without rolling.
Use it in anything you build, commercial and client work included. Licence