While these are all cool, the tool they're selling just openly is made for stealing styles from other pages? I mean I get that CSS isn't copyrighted (specifically), but it does just seem like its a tool made for stealing other peoples work?
CSS checkbox examples
41–50 of 64 posts
Re: CSS checkbox examples
#42Unfortunately, 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.
And if you use React, the react-aria library is excellent for this. See e.g. the useCheckbox hook: https://react-spectrum.adobe.com/react-aria/useCheckbox.html
Though if your "checkbox" is to take effect immediately, consider using a toggle button: https://react-spectrum.adobe.com/react-aria/useToggleButton....
Re: CSS checkbox examples
#43Unfortunately, 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.
Incidentally most of them _are_ focusable by the keyboard but just aren't tabbable.
I'm using a Chrome plugin Vimium - one of the shortcuts 'f' (documented as opening links) actually highlights all focusable elements. Using this feature shows most of the checkboxes are interactive.
Edit: I guess the reason for me pointing this out is hopefully there's an easy way to make these more accessible for keyboard users.
Re: CSS checkbox examples
#44Looking at some of the skeuomorphic designs, I can't help but feel that this design style went out of vogue way too soon.
It looks so...juicy.
Re: CSS checkbox examples
#45Unfortunately, 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.
Looks like it needs javascript though.
Doesn't work for me on chrome mobile without JS.
Re: CSS checkbox examples
#46Unfortunately, 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.
This seems more like a gallery of art/starting point than a "use this as-is", so I'm sad to see this comment on the top of HN since as a show of what can be accomplished with checkboxes it's amazing. We front-end devs would benefit from a lot more works of art like this, and then people trying to implement them into real systems would need to make them accessible. Similar to how we benefit greatly from Dribbble. If w…
I agree with the sentiment but there are problems besides accessibility here:
1. Crosses and squares being used instead of check marks.
2. Circles being used as containers instead of boxes.
3. Toggle switches being presented as checkboxes.
Maybe 5-10 of these are good inspiration for checkboxes.
Re: CSS checkbox examples
#47Ironically I needed to enable JavaScript in order to view any checkbox. Terrible.
Re: CSS checkbox examples
#48Earlier quoted context omitted.
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.
Looks like it needs javascript though. Doesn't work for me on chrome mobile without JS.
Javascript is actually great for accessibility, it’s really hard to properly implement WAI-ARIA without it. Most people with screen readers will have js enabled too.
Re: CSS checkbox examples
#49The only clear and no margin for confusion is the one with "X" vs "check" inside the circle. If that "X" would be red and the check green that would add even more clarification. I hate UI's where I have to click everything first in order to understand what's what, I prefer intuitive design instead.
X is equivalent to a check mark for most people. I think it's mostly an American thing to see an X as meaning "not checked".
Re: CSS checkbox examples
#50Earlier quoted context omitted.
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.
Looks like it needs javascript though. Doesn't work for me on chrome mobile without JS.
Those are pictures. Not actual demos.