Home API system CodePenChallenge: Checkboxes – CodePen Blog

CodePenChallenge: Checkboxes – CodePen Blog


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.

- 1x1 - CodePenChallenge: Checkboxes – CodePen Blog
Even the quiet ones can be fun

July’s Challenge Sponsor: HelloSign

- 1x1 - CodePenChallenge: Checkboxes – CodePen Blog

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

How to Participate

Create a Pen and tag it 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 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 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.

Source link


Please enter your comment!
Please enter your name here