Would love to be able to size them with eg. CSS Variables. --width, --height etc.
CSS checkbox examples
21–30 of 64 posts
Re: CSS checkbox examples
#22Some of these don't look like checkboxes at all, and wouldn't trigger any indication that they could be changed. For example, if I saw number 44 next to a line of text, I'd think "that must be something not available for some reason" rather than "I could click that to choose it".
Same with 50 and 26 (that's a stop sign!) - they look like bullet points.
Some of the others are pretty nice though!
Re: CSS checkbox examples
#23Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression. Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.
Good point. Indeed looks like only a few have. I'll try to add focus styles to all of them in the future. Thanks!
No post body was provided.
Re: CSS checkbox examples
#24I think the green and red color is a must for all sliders. It's very hard to tell if it's On or Off when it's a monochrome slider.
Color is nice but it should never be required to determine widget state. there should always be indicators showing on and off and what state the widget in in.
And... most of the sliders shown fail miserably. come on guys you are not helping my perception that design is a sick profession.
Re: CSS checkbox examples
#25I’m on mobile right now so can’t check the source code, but the transition duration of many (most?) of these are way too long, feels very janky. Some also seem to have a noticeable delay before the transitions even begin (Safari on iPadOS 16.1).
Re: CSS checkbox examples
#26I would be interested in a multi-state looping widget, like "yet to start, ongoing, paused, finished"
Re: CSS checkbox examples
#27It was a fun exercise to go through each of the designs in this gallery and evaluate each one. It's easy to do that for individual form controls as design elements!
Lots of these made for a nice showcase but should never be used in a product ever - just horrendously unintuitive. For some, I wouldn't even know they were checkboxes if the page wasn't titled "here's a bunch of checkboxes". But a few of them were actually quite nice, accessible, and pleasantly useable.
Ultimately it seems that the checkboxes that were closest to the native OS checkboxes were the ones I enjoyed trying the most. I guess that's a predictable outcome. But it might be an indication that the further one strays from the OS defaults, the less good of a design it is? Maybe checkboxes are a solved problem, and there is only narrowly limited room for a brand to apply its personality on form controls before they become less usable for the sake of being "unique".
#33 was by far my favourite, for the record.
Re: CSS checkbox examples
#28Tailwind UI is a commercial product, no? Whether the checkbox CSS meets the threshold for copyright or not, I'm not sure encouraging folks to copy its styles is a great idea.
Re: CSS checkbox examples
#29Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression. Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.
Tailwind UI's checkboxes (https://tailwindui.com/components/application-ui/forms/check...) are fine, accessibility-wise. They can be tabbed to using the keyboard, they are proper elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.
Re: CSS checkbox examples
#30Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression. Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.
Tailwind UI's checkboxes ( https://tailwindui.com/components/application-ui/forms/check... ) are fine, accessibility-wise. They can be tabbed to using the keyboard, they are proper elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.
Tailwind is one of the vanishingly few css frameworks/css utility collections/css design systems that is really, really good about keeping semantic meaning of things and accessibilty intact, and whose examples show how to implement them correctly.
Almost everyone else is "screw this, we're going to use links as buttons and divs as lists".