6 ms·

CSS checkbox examples

147 points by guivr 4y ago

quickthrower2 4y ago
It is missing this one https://www.andy.works/words/the-most-satisfying-checkbox https://www.andy.works/words/the-most-satisfying-checkbox
flurdy 4y ago
Number 44 has issues internationally as it toggles between a tick and a cross. I now live in a country which uses ticks to check a box, but I grew up in a country that uses crosses to check a box and had no idea what a tick was until I moved here.
iampivot 4y ago
Assume JS is needed in order for the slide checkboxes to be slidable.
- guivr 4y ago
  No JS, all made with pure CSS :D (you can copy the code to see how it works)
- speps 4y ago
  CSS transitions behind the scenes.
- candu 4y ago
  Why assume? You can copy-paste the code and see how it works. Most pure CSS checkboxes make heavy use of pseudo-classes and pseudo-elements - but it is very possible to make these sliders without JS!
- Raicuparta 4y ago
  Funny you mention that, because hidden check boxes and radio inputs are often used creatively (in a kind of horrifying way) to store app state and avoid using JavaScript entirely, while still having complex animations. For instance, you can make a fully functional image gallery carousel with controls to navigate between each image with zero JavaScript like this, and this is just one of the simplest examples.
speps 4y ago
#10 should be off by default like all the other ones.
- guivr 4y ago
  Thanks for the heads up
swyx 4y ago
added to my list :) https://github.com/sw-yx/spark-joy/blob/master/README.md#anything-but-dropdowns https://github.com/sw-yx/spark-joy/blob/master/README.md#any... happy css scan customer here. just used it today to grab some annoying css. feature request: convert the css to react style objects. i hate that i need to use react styles (just fix jsx! urgh.) but i had to constantly use https://staxmanade.com/CssToReact/ https://staxmanade.com/CssToReact/ to convert it
- guivr 4y ago
  Thanks swyx <3 Nice, yes, I plan to add "copy to react" feature soon. Will let you know when it's ready
merek 4y ago
Thought I'd take this opportunity to thank you for your work. I came across your site searching for a box-shadow the other day, after spending too long attempting it myself
- guivr 4y ago
  Thanks, merek. Happy it was helpful to you :D
FrontAid 4y ago
Unfortunately, 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/ https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.
- guivr 4y ago
  Good point. Indeed looks like only a few have. I'll try to add focus styles to all of them in the future. Thanks!
  - to1y 4y ago
  - deleted 4y ago
    [deleted]
- deleted 4y ago
  [deleted]
- lol768 4y ago
  Tailwind UI's checkboxes (https://tailwindui.com/components/application-ui/forms/checkboxes https://tailwindui.com/components/application-ui/forms/check...) are fine, accessibility-wise. They can be tabbed to using the keyboard, they are proper <input type="checkbox"> elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.
  - dmitriid 4y ago
    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".
dt3ft 4y ago
Very difficult to resist going through and checking each and every one of them.
Crazyontap 4y ago
I 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.
- aix1 4y ago
  And green/red is not so great for the most common type of colour blindness: https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness https://www.nei.nih.gov/learn-about-eye-health/eye-condition...
- somat 4y ago
  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.
okasaki 4y ago
The pill boxes are awful. I never know if it means that it's on or off.
unnouinceput 4y ago
The 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.
- seszett 4y ago
  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".
modec 4y ago
Would love to be able to size them with eg. CSS Variables. --width, --height etc.
mpettitt 4y ago
Some 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!
oefrha 4y ago
I’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).
psychoslave 4y ago
I would be interested in a multi-state looping widget, like "yet to start, ongoing, paused, finished"
Edd314159 4y ago
It 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.
- yencabulator 4y ago
  > #33 was by far my favourite, for the record. That "pulse" on activation is pretty much Material Design. https://material-components.github.io/material-web/demos/checkbox/ https://material-components.github.io/material-web/demos/che...
lol768 4y ago
Tailwind 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.
rollulus 4y ago
How did it become normal in software to refer to describe your own work as beautiful?
- quickthrower2 4y ago
  The work here is just curation. The checkboxes were made by other people.
amsterdorn 4y ago
No real-world application will sacrifice function for form. The web is an accessible platform, not a "beautiful" one.
- alpaca128 4y ago
  I'm not sure we use the same web. "Accessible" or "function over form" are the exact opposite of how I'd describe it.
darkcha0s 4y ago
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?
spaceman_2020 4y ago
Looking 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.
- mrtksn 4y ago
  It shows some signs of comeback. The problem with the last skeuomorphic design trend was that it wasn't "honest", for example leather elements didn't behave like leather and the illusion quickly fell apart making it tacky. With the current performance of the devices we can have much more convincing materials and object designs. Apple's blurry glass design on iOS and macOS is very nice for example, it blends the background very nicely and the way the colors bleed you can tell. that this is not simply a blur effect.
  - frosted-flakes 4y ago
    Windows 7's Aero effects were pretty honest, in my opinion.
FriedrichN 4y ago
Ironically I needed to enable JavaScript in order to view any checkbox. Terrible.
bastawhiz 4y ago
I'd like to remind folks that switches and checkboxes mean two different things. Please do not use them interchangeably on the web. Switches imply that changing the value has an immediate effect (i.e., the change is immediately saved). Checkboxes do not, and should have a corresponding Save button. Switches were popularized by iOS, where they almost always have immediate effect. Checkboxes have been around much longer on the web, and have almost never had immediate effect (hell, it wasn't even possible until Web 2.0).
oliwarner 4y ago
Pretty mixed feelings. It's nice that there's all this "free" stuff that I can see and play with and just click to copy and drop into my own project without any thinking or worrying about buying UI kits… … But I write novel CSS too. It's a very real part of my livelihood and this company is selling a product that can take my work without any attribution in the copied code. And then they seemingly use that work to market their product. Important to remember that [even good] attribution is no substitute for an actual license to use somebody else's code. It's piracy. You wouldn't steal a policeman's helmet, etc.

147 points by guivr 4y ago

It is missing this one https://www.andy.works/words/the-most-satisfying-checkbox https://www.andy.works/words/the-most-satisfying-checkbox

flurdy 4y ago

Number 44 has issues internationally as it toggles between a tick and a cross. I now live in a country which uses ticks to check a box, but I grew up in a country that uses crosses to check a box and had no idea what a tick was until I moved here.

iampivot 4y ago

Assume JS is needed in order for the slide checkboxes to be slidable.

guivr 4y ago
No JS, all made with pure CSS :D (you can copy the code to see how it works)
speps 4y ago
CSS transitions behind the scenes.
candu 4y ago
Why assume? You can copy-paste the code and see how it works. Most pure CSS checkboxes make heavy use of pseudo-classes and pseudo-elements - but it is very possible to make these sliders without JS!
Raicuparta 4y ago
Funny you mention that, because hidden check boxes and radio inputs are often used creatively (in a kind of horrifying way) to store app state and avoid using JavaScript entirely, while still having complex animations. For instance, you can make a fully functional image gallery carousel with controls to navigate between each image with zero JavaScript like this, and this is just one of the simplest examples.

speps 4y ago

#10 should be off by default like all the other ones.

guivr 4y ago
Thanks for the heads up

swyx 4y ago

added to my list :) https://github.com/sw-yx/spark-joy/blob/master/README.md#anything-but-dropdowns https://github.com/sw-yx/spark-joy/blob/master/README.md#any... happy css scan customer here. just used it today to grab some annoying css. feature request: convert the css to react style objects. i hate that i need to use react styles (just fix jsx! urgh.) but i had to constantly use https://staxmanade.com/CssToReact/ https://staxmanade.com/CssToReact/ to convert it

guivr 4y ago
Thanks swyx <3 Nice, yes, I plan to add "copy to react" feature soon. Will let you know when it's ready

merek 4y ago

Thought I'd take this opportunity to thank you for your work. I came across your site searching for a box-shadow the other day, after spending too long attempting it myself

guivr 4y ago
Thanks, merek. Happy it was helpful to you :D

FrontAid 4y ago

Unfortunately, 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/ https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.

guivr 4y ago
Good point. Indeed looks like only a few have. I'll try to add focus styles to all of them in the future. Thanks!
- to1y 4y ago
- deleted 4y ago
  [deleted]
deleted 4y ago
[deleted]
lol768 4y ago
Tailwind UI's checkboxes (https://tailwindui.com/components/application-ui/forms/checkboxes https://tailwindui.com/components/application-ui/forms/check...) are fine, accessibility-wise. They can be tabbed to using the keyboard, they are proper <input type="checkbox"> elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.
- dmitriid 4y ago
  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".

dt3ft 4y ago

Very difficult to resist going through and checking each and every one of them.

Crazyontap 4y ago

I 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.

aix1 4y ago
And green/red is not so great for the most common type of colour blindness: https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness https://www.nei.nih.gov/learn-about-eye-health/eye-condition...
somat 4y ago
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.

okasaki 4y ago

The pill boxes are awful. I never know if it means that it's on or off.

unnouinceput 4y ago

The 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.

seszett 4y ago
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".

modec 4y ago

Would love to be able to size them with eg. CSS Variables. --width, --height etc.

mpettitt 4y ago

Some 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!

oefrha 4y ago

I’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).

psychoslave 4y ago

I would be interested in a multi-state looping widget, like "yet to start, ongoing, paused, finished"

Edd314159 4y ago

It 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.

yencabulator 4y ago
> #33 was by far my favourite, for the record. That "pulse" on activation is pretty much Material Design. https://material-components.github.io/material-web/demos/checkbox/ https://material-components.github.io/material-web/demos/che...

lol768 4y ago

Tailwind 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.

rollulus 4y ago

How did it become normal in software to refer to describe your own work as beautiful?

quickthrower2 4y ago
The work here is just curation. The checkboxes were made by other people.

amsterdorn 4y ago

No real-world application will sacrifice function for form. The web is an accessible platform, not a "beautiful" one.

alpaca128 4y ago
I'm not sure we use the same web. "Accessible" or "function over form" are the exact opposite of how I'd describe it.

darkcha0s 4y ago

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?

spaceman_2020 4y ago

Looking 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.

mrtksn 4y ago
It shows some signs of comeback. The problem with the last skeuomorphic design trend was that it wasn't "honest", for example leather elements didn't behave like leather and the illusion quickly fell apart making it tacky. With the current performance of the devices we can have much more convincing materials and object designs. Apple's blurry glass design on iOS and macOS is very nice for example, it blends the background very nicely and the way the colors bleed you can tell. that this is not simply a blur effect.
- frosted-flakes 4y ago
  Windows 7's Aero effects were pretty honest, in my opinion.

FriedrichN 4y ago

Ironically I needed to enable JavaScript in order to view any checkbox. Terrible.

bastawhiz 4y ago

I'd like to remind folks that switches and checkboxes mean two different things. Please do not use them interchangeably on the web. Switches imply that changing the value has an immediate effect (i.e., the change is immediately saved). Checkboxes do not, and should have a corresponding Save button. Switches were popularized by iOS, where they almost always have immediate effect. Checkboxes have been around much longer on the web, and have almost never had immediate effect (hell, it wasn't even possible until Web 2.0).

oliwarner 4y ago

Pretty mixed feelings. It's nice that there's all this "free" stuff that I can see and play with and just click to copy and drop into my own project without any thinking or worrying about buying UI kits… … But I write novel CSS too. It's a very real part of my livelihood and this company is selling a product that can take my work without any attribution in the copied code. And then they seemingly use that work to market their product. Important to remember that [even good] attribution is no substitute for an actual license to use somebody else's code. It's piracy. You wouldn't steal a policeman's helmet, etc.