E-ink
Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
CSS
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-e-inkAbout this component
A tiny e-reader screen as the checkbox: ticking refreshes it the way e-paper does, flashing ink then blank paper before the tick appears, and clearing leaves a faint ghost of the tick that fades away.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers2
- Click
- State change
Techniques3
- CSS transition
- SVG
- Radial gradient
Accessibility
Keyboard and screen readers
A native checkbox inside a <label>, so Space toggles it and the visible label names it; :focus-visible on the input outlines the device.
Reduced motion
There is no flash and the tick changes at once.
Use it in anything you build, commercial and client work included. Licence