Zero Trickery Custom Radios and Checkboxes
I feel like half of all “custom-designed radio buttons and checkboxes” do two things:
- Make them bigger
- Colorize them
I feel like half of all “custom-designed radio buttons and checkboxes” do two things:
We might leave a text input unstyled. We might leave a link unstyled. Even a button. But checkboxes… we don’t leave them alone. That’s why styling checkboxes never gets old.
Although designing checkboxes is not that complicated, we also don’t …
Sara Soueidan digs into this HTML/UX situation. “Yes” or “no” is a boolean situation. A checkbox represents this: it’s either on or off (uh, mostly). But is a checkbox always the best UX? It depends, of course:
…Use radio
I was reading Anna Kaley’s “Listboxes vs. Dropdown Lists” post the other day. It’s a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons …
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has …
Lindsey Kopacz has a wonderful blog about accessibility. I’ve seen a number of her articles making the rounds lately and I was like, dang I better make sure I’m subscribed. For example:
…Toggles. Switches. Whatever you want to call them, they’ve been with us for some time and have been a dominant a staple for many form interfaces. They’re even baked right into many CSS frameworks, including Bootstrap and Foundation.
It’s …
There is a such thing as an indeterminate checkbox value. It’s a checkbox (<input type="checkbox"/>
) that isn’t checked. Nor is it not checked. It’s indeterminate.
We can even select a checkbox in that state and style it …
An interesting journey of form UX, documented by Tim Paul. It started with browser defaults. It’s unclear why that wasn’t working. But interestingly, an alteration that included giant label-based click areas in color-offset boxes didn’t help. What actually helped was …