The Checkbox Hack

Module 2 of 6 in the KINETIC.email 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 creates interactive elements without JavaScript. It controls the visibility of content based on the state of checkboxes or radio buttons. When a user clicks a label associated with an input, the input's state changes, and CSS detects that change to restyle other elements. Because email clients typically strip JavaScript, this is the foundation of kinetic email.

The building blocks

• Input elements: checkboxes or radio buttons that store state
• Labels: elements users click to change input state
• CSS selectors: rules that detect state and apply styles
• Content elements: sections that show or hide based on state

Selectors used

• :checked to detect the checked state
• + the adjacent sibling selector
• ~ the general sibling selector
• ~* to reach nested elements

Basic example: a simple toggle

<input type="checkbox" id="toggle" class="hidden-checkbox">
<label for="toggle" class="toggle-label">Toggle Content</label>
<div class="content">This content is now visible.</div>

.content { display: none; }
#toggle:checked ~ .content { display: block; }

The checkbox is hidden but stays in the DOM, the label is styled as a button, and the content starts hidden. The selector #toggle:checked ~ .content targets the input with id "toggle", applies only when it is checked, and uses the general sibling selector to reach the later element with class "content".

Exercise 1 has you build this toggle yourself in an in-browser code lab: add the checkbox and a label reading "Click to reveal", hide .content by default, and reveal it with a :checked rule.

Why we stop using display: none

It works, but it has two problems for production kinetic email:

• Accessibility: display: none removes content from the accessibility tree, so screen reader users never know it is there.
• Animation: display is a discrete property, so CSS transitions cannot animate it. Animating opacity and max-height is simpler and more robust.

The solution is accessible hiding. The hidden state uses max-height: 0; opacity: 0; overflow: hidden; and the visible state uses max-height: 500px; opacity: 1;. The rest of the course uses this pattern. In Exercise 2 you upgrade your toggle to it, add a :checked + label rule to color the active label, and add transition: all 0.3s ease so the content fades and expands smoothly.

Advanced example: a tabbed interface

Tabs are one of the most common applications of the hack. They use radio buttons that share a name attribute, so only one can be selected at a time.

<input type="radio" id="tab1" name="tabs" checked>
<input type="radio" id="tab2" name="tabs">
<div class="tabs">
  <label for="tab1">Tab 1</label>
  <label for="tab2">Tab 2</label>
</div>

#tab1:checked ~ .tabs label[for="tab1"] { background: #10b981; color: white; }
#tab1:checked ~ .content #content1 { display: block !important; }

Each tab has its own content section, the active tab gets distinct styling for visual feedback, and more specific selectors reach nested elements. Pro tips: use the checked attribute to set a default tab, use !important on display properties so they hold in email clients, and keep the inputs at the beginning of the HTML. Exercise 3 has you group three radios with name="tabs", check the first by default, and show the matching panel for each.

The technique suits email because it uses standard form elements, basic CSS and native browser behavior, and avoids JavaScript, external libraries and advanced CSS features.

Best practices and common challenges

Do

• Place inputs at the start of your HTML so sibling selectors can reach later elements.
• Use meaningful, descriptive IDs.
• Test in your target email clients.
• Add visual feedback so users know they clicked something interactive.

Avoid

• Overly complex selectors and too many interactive elements.
• Forgetting a fallback for clients that do not support these techniques.
• Relying on advanced CSS features.

For deeply nested targets, use the general sibling plus wildcard selector, for example #checkbox:checked ~* .target-element. When clients strip or modify CSS, use !important, test, and implement a robust fallback strategy.

Real-world applications

The checkbox hack powers tabbed interfaces, accordions for FAQs or product details, product carousels, simple surveys, image galleries and multi-step, form-like flows.

Signing in lets you track your progress and earn course completion credits.

Previous: Introduction to Kinetic Email. Next: The Kinetic Lightswitch. Back to the learning hub.