Mischief

05 / Playful extras

Impossible Checkbox

A checkbox with one stubborn rule: the bear will not let you leave it on. Best kept for demos, Easter eggs, and harmless preferences.

Live previewSource
Off

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Demo() {
  return (
    <ImpossibleCheckbox
      aria-label="Enable bear mode"
      onAttempt={(attempt) => console.log({ attempt })}
    />
  )
}

API

onAttempt(attempt: number) => voidRuns each time someone tries to check it.
revealAfternumberAttempts before the bear starts peeking. Defaults to 2.
angryAfternumberAttempts before the bear looks angry. Defaults to 5.
classNamestringClasses and custom properties for the frame.
...inputPropsInputHTMLAttributesNative checkbox attributes except checked and onChange.

Accessibility

The control is a native checkbox and works with pointer, touch, and keyboard input. A polite live region explains that the bear switched it off. Reduced motion skips the swat sequence while keeping the result clear. Do not use it for consent, safety, or any setting a person genuinely needs to change.

Dependencies

motion, clsx, tailwind-merge