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.
Do something fun and original with the
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 HelloSign.com.
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).
- 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.
- 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.