Create a Custom SVG Checkbox (Animated AND Accessible!)

(Codepen below) - Today, we're going to check out how to create a custom SVG checkbox that animates on click. We'll use Chromevox to ensure it's accessible as well. First, we'll hop into Adobe Illustrator (although, you can use any vector-capable software) to design the icon, then we'll define the HTML and CSS. There's a tiny bit of JavaScript as well, to toggle and reverse the animation.

Codepen demo for this project:

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!


^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -



Come to my discord server or add me on social media and say Hi!

[rthurJ]

You actually don't need to add javascript to reverse, you can set your transition to be on the unchecked/default version, it will reverse it. Great video though!

[atmanx]

Really interesting video. In case anyone is confused regarding the checking if the checkbox is checked even though the display is none.
I found that the reason it still works is because just because the checkbox is hidden, clicking the <label> still toggles its value on and off.

[naveedh]

You are doing a great job. Helping designers understand all nuances. Thanks for your tutorials.

[sneaky-Jay]

I am not sure but if i remember correctly if you put transition on the unchecked checkbox you will get smooth transition without JavaScript for the unchecked element.

[Bilal-lenw]

Awesome I was hesitated to start playing with SVG, maybe this is the start ;D thx a lot

[abhishekverma]

thanks a lot... I was searching for this from a long time and finally got this clear way of doing things for custom checkboxes / radio buttons

[gabrielalejandromartinezla]

Awesome, i want to see more videos with svg animations

[dmitry.gashko]

Looks awesome, but... never... never ever hide native checkbox with "display: none". Use "appearence: none" or "visually-hidden"

[MrAnonymous]

Another quality video sir
Learning lot from your channel day by day
Thank you so much :)
Much love from India ❤️️

[minimotivates]

Utilizing that Skeuomorphism right there too.

[chirayujoshi]

Hey Gary,
U can use prettier extension to indent all those stuff automatically...

[jotajaviergonzalezgarcia]

I like your videos a lot. You go for the simply and functional. Ive got a question, just curiosity. Can you avoid using JS ? ive thought in put 2 exact svg and animate one on the entry and the other on the exit, playing with opacity... I know the js in this video is easy, but to keep the things out of js... just curiosity. Thanks for your answer

[rayromanov]

Great tutorial, and I love the result, but I wish you'd go more into the accessibility aspect, and specifically the difference between `display: none;` and `opacity: 0;` here.

`display: none;` is not accessible. The element is just not rendered at all, and any interaction the user can execute is gone with it. The only reason the checkbox still works in this tutorial is because the label preserves the functionality. You can't tab to it, accessibility tools lose the outline on focus, and keyboard shortcuts stop working (space to toggle), so blind users will really struggle.

`opacity: 0;` will preserve all functionality. The element is still there, just invisible. You can then give it a width and height equal to the SVG, and position it absolutely right on top of the SVG. You can tab to it, the on-focus outline for accessibility tools is there, and you can also toggle it with space. Much better for people who struggle with their sight.

[bhBlacky]

but, can it acually send data, when the input field gets display:none? doesnt that remove it from the dom? maybe only visibility:hidden ?

[rijadsmajlovic]

Thank you very much on this great tutorial and awesome explanation :D

[TheSwitzh]

Love your content! Can you do some svg animations on a select to make til more smooth to look at?

[Fabian-_-]

The main issue here is that you put the transition inside the wrong part. The improved version you linked to simply put it in the right one. Next time check for such things, every transition goes both ways normally, if not there is a mistake

[elabinnovations]

Can you make a CSS framework with your styles?

[eshantripathi]

Whatever you teach are they open source??

[frenchfry]

I thought the label 'for' is related to the input name ?