True and false. Good and evil. Ying and yang. Checked and unchecked. The humble checkbox. The keeper of near-boolean state.

Last week we looked at forms as a whole. This week, let's zoom in a bit and look at the smallest of all form elements: the checkbox.

Your Challenge

Do something fun and original with the checkbox element.

Even the quiet ones can be fun

July's Challenge Sponsor: HelloSign

Everything IT requires and developers love. The HelloSign API allows you to collect legally binding signatures from your own app. Learn more at

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag: cpc-checkboxes. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).


  1. Did you know that checkboxes can have an intermediate state? There is no HTML or CSS way to get them into that state, but it exists, and JavaScript can set it. What might you do with that?
  2. What is a toggle if not a checkbox? Ignoring that intermediate state (rare anyway), both toggles and checkboxes are either on or off. Build a toggle! You might wanna bone up on The Checkbox Hack.
  3. Have you played with web components? A web component can actually extend a native component, which is an interesting concept.


  • Toggles are a popular thing for people to play with already here on CodePen. Check out the Collection, Tag, and Search.
  • MDN has loads of info, getting into things like the unusual handling of validity.
  • If you're looking to replace the checkbox with your own UI, but retain the native UX, look at how WTF, forms? does it.