Reveal
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initCbReveal(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-revealAbout this component
Send me a copy: ticking it draws a line down from the box that turns into an email field below and puts the cursor in it; unticking folds it away.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers4
- Click
- State change
- Draw
- Focus
Techniques3
- CSS transition
- stroke-dashoffset
- SVG stroke
Accessibility
Keyboard and screen readers
A native checkbox in a <label> with aria-expanded and aria-controls pointing at the field. Ticking moves focus to the email field, which has its own label; while folded away it is out of the tab order.
Reduced motion
It opens at once.
Use it in anything you build, commercial and client work included. Licence
More checkboxes
See allShippingMira Patel14 Harbour RoadBristol BS1 4QA