The Checkbox Hack

Module 2 of 6 — Developer Course

Master the core technique that powers all kinetic emails using CSS selectors and HTML form elements.

What is the Checkbox Hack?

The checkbox hack is a CSS technique that allows you to create interactive elements without JavaScript. It works by controlling the visibility of content based on the state of checkboxes or radio buttons.

When a user clicks a label associated with a checkbox or radio button, it changes the state of that input. CSS detects this state change via the :checked pseudo-class and modifies other elements accordingly.

Building Blocks

Input elements (checkboxes or radio buttons) that store state
Labels that users click to change input state
CSS selectors (:checked, +, ~) that detect state and apply styles
Content elements that show or hide based on state

Real-World Applications

Tabbed interfaces, accordions, product carousels, surveys, image galleries, and multi-step forms — all built with this one technique.