Terms
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.
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initCbTerms(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-termsAbout this component
Agree to the terms only after reading them: the checkbox stays locked, a dashed box with a padlock, until you scroll the terms to the end. A bar fills as you read, then the padlock drops away and the box pops solid, ready to tick.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- Click
- State change
- Draw
Techniques5
- State machine
- CSS transition
- Keyframes
- SVG
- stroke-dashoffset
Accessibility
Keyboard and screen readers
The terms are a focusable, labelled region, so they can be scrolled from the keyboard. The checkbox is disabled until the end is reached and described by the hint, so a screen reader hears why it is locked; the description is dropped once it unlocks. Once read, Space toggles it and the visible label names it.
Reduced motion
The unlock and the shake are instant.
Use it in anything you build, commercial and client work included. Licence