Cookie

No dependencies

Install with shadcn

Needs a free account token. Get a token

npx shadcn@latest add @movin/checkbox-cookie

About this component

Accept cookies, taken literally: ticking takes two bites out of the cookie, crumbs fall from the edge and the cookie jolts with each chomp. Clearing makes it whole again.

Dependencies
None
Difficulty
Advanced
Reduced motion
Respected
Theme
Light and dark
Follows page color-scheme

Triggers3

  • Click
  • State change
  • Keyframe

Techniques4

  • @property
  • Keyframes
  • Radial gradient
  • CSS transition

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 cookie.

Reduced motion

The bites appear at once, with no crumbs.

Use it in anything you build, commercial and client work included. Licence

More checkboxes

See all
Double checkGet code
E-inkGet code
FlourishGet code
Fold-upGet code