 Thank you for the introduction. I'm Ted. I put it here in the slides because I realized after living in Southeast Asia for four and a half years that having a single syllable name is a hard thing to live with. Whenever I introduce myself, I'm normally met with some combination of ha or, oh, that's nice, but what's the rest of your name? But you can find me online as Drenmi. I hang out on GitHub in the Ruby Slack channel and also in the CopyJS Slack channel. You can't reach me on Twitter because my Twitter account has two-factor authentication that's tied to my Swedish number, so I have to go to Sweden to sign in first. I am on the core team of a thing called Rubocop, which is a style checker for the Ruby programming language. We're looking for people to help us out, so if you're interested in contributing to open source, you can talk to me. I'm also involved in a bunch of other things, so if you want to give presentations or if you want to coach girls or ladies, you can also talk to me. I work in a company called Engage Rocket. We built HR software for medium-sized companies. We're also looking for developers, so yes, if you want a job or if you want to present or coach or do open source, you can talk to me. But you can also talk to me without an excuse if you feel like it. So today I'm going to talk a little bit about pure CSS checkboxes. It's actually kind of a weird thing to call it because it's not pure CSS. To have a checkbox, you need some HTML in the first place. I think the key is that there's no JavaScript, so maybe it should be called no JS checkboxes or something. JavaScript-free checkboxes. That's what I expect. Yeah, I did some keyword research, and this seems to be what people call it, so this is officially the name now. And this was necessitated by, at Engage Rocket, we started asking the important questions like, do our checkboxes spark joy for our users? Actually, that was not it. We kept asking for a designer for the longest time, and now we have a UI designer. And it turns out she's really good at designing stuff, but it also means that we have to build everything that she designs. So I had to look into this in order to implement some of her designs. That was a little bit about the background. I had some requirements when I thought about implementing these new checkboxes that our designer showed us. One thing is I wanted them to be accessible, so if you're using your keyboard to navigate the form, I still want you to be able to see which form element have you selected right now. I can toggle the checkboxes with my spacebar. I can automatically skip disabled checkboxes and all sorts of accessibility considerations. I wanted it to be interoperable, so basically I just want this to work together with regular HTML forms. Just drop it in there, and then it works. Ideally, just use the checkboxes we already have there and then make them look fancy. And there was a third requirement. I did want it to be not a can of work. So I actually invented this phrase on the way here, and it's a play on the phrase not a can of worms. Because if we had chosen to do this with JavaScript, it opens up this explosion of decisions we need to make. Or how do we state manage these components? Where does the state go? How does it go into the form? And then into the server. And I didn't want that to happen. I just wanted it to sort of work. So our strategy and wrapping, I just want the fancy checkboxes, so we let the browser handle all the state management and interacting with form elements and such. And that's sort of boiled down to the fact that we don't want to mess with the markup. We want our markup to be essentially an input of type checkbox and a label. That's all. I don't want any other fancy stuff going on either. So the implementation for this, I started, as I often do, by just taking out a piece of paper and a pen. And I drew a checkbox. This is not the checkbox I drew, but it looked sort of like this. And I was like, what are the parts of a checkbox? And I spent a considerable amount of my life thinking about the anatomy of a checkbox, which is about 20 minutes. It turns out that it's fairly self-explanatory. There's the check thing, and there's the box thing. And that is the anatomy of a checkbox. So in case you weren't following, I sort of drew this other diagram to show how it fits together. So just to appreciate the exceptional naming choice of this kind of thing. But that's not entirely true because there's a lot of other stuff going on, because the user can interact with this because it's a form element. It's not just a static thing. So I started to look at that, and I'm like, yeah, it can be either checked or not. It can also disable it. You can focus it, which is what happens when you navigate to it with your keyboard or when you have clicked on it, and it still maintains the focus. You can hover it. And there's also this thing called active. Anyone know what this is active? OK, so if you're using your mouse or if you're using the space bar, if you hold it down on the checkbox, then the checkbox is active as long as you hold the mouse down or hold the space bar down. So I only found out when I started looking into checkboxes. I knew there was an active pseudo selector, but I didn't really know what it was. And then I was like, OK, so maybe there are 32 different permutations. So should we have 32 different variants? And then I asked my colleague who is Singaporean, and he said something like, wow, yeah, cannot let. So then I was like, OK, back to the drawing board. Hovered, if you use Safari or Chrome, there is actually no hover thing on checkboxes. Actually, nothing happens. It doesn't change the cursor or anything. So I was like, OK, maybe we don't need that, so we can remove half of those 32. But then actually, if it's disabled, you also can't focus it, so you don't need to style it. It can't be active because you can't click it, and it can't be focused. So that's only two variants. If it's enabled, yeah, it can be checked or not checked. It can be focused, but the focus, what that looks like doesn't change whether it's checked or not, because it's like an outline. And then it can be active or not. So that looks like it brings it down to seven variants. So I actually took some time to think about it and mapped those out. It's like, OK, if it's disabled, it can be checked or unchecked. That's all. There can be nothing else. If it's enabled, OK, then it can be checked and unchecked. It can be focused, but that's the same whether it's checked or unchecked. And it can be active, and those look different as well. So these are the seven sort of style variants that I was looking at. And I checked with my colleague again, and he said, OK, seven seems doable, much better than 32. So I also thought it would be a little bit about the limitations. So the approach I took, you must have a label. So if you were trying to do something like the Gmail interface where there's a list and then there's a rogue checkbox on one of the sides, it might be hard because for this particular implementation, you need a label. You can also only have two value states, either checked or unchecked. And this is the limitation of HTML itself. So if you want to do this thing, which is also in Gmail, where you have not checked, checked, and sort of checked, I think this happens when you use the Select All checkbox, and then you unselect one of the items, then you get the third thing here. Indeterminate. But because I've studied the anatomy of checkboxes for a large part of my life, I can tell you this is actually not a checkbox. It's something else. Maybe it's like check slash indeterminate box. OK, so I have gone on about the thought process before I started doing this. So this took maybe one hour to plan out. And then I just needed to figure out how do I actually build this thing. So starting out was easy because I knew I wanted to have the very basic markup, a checkbox, and a label. So I just put that in the HTML with no styles whatsoever. It looks pretty bland. It doesn't spark joy, but it's a good start. It works. It works. OK, I need to hide the ugly Chrome checkbox first, because otherwise it will be in there on top of the new one, because so far you cannot style the checkbox itself, maybe in the future, I don't know. But that's also what I thought in 2001 when I was trying to do some fancy checkboxes. OK, add a pseudo element for the box. So as a refresher, there is the box and there is the check thingy. So I decided to make this pseudo element that is inserted before the label. But then came, OK, so this is the part that is not so nice about this implementation that maybe someone can improve on once they get a hold of the code pen. To do the check mark, I used another pseudo element that is after the label, but that leads to some positioning shenanigans that we'll come to later. And once that's done, we already have the two elements we need. We have the box, and we have the check mark. And those are just two elements that we can style any way we want. So the last step is just to style up all the variants that we listed down, which are the seven. So I'm going to try to demo this. I'm not going to do it live because I am not crazy. I prepared this beforehand. I hope it works. Like I tried it a few minutes before I started, but you never know. Pray to the demo gods. OK, so I can move away the code first. Maybe zoom in a bit. OK, if this works, I can click this. OK, I don't know if you can see. Can you see that there's like an outline? OK. And the background is sort of light gray. OK, so the light gray background is because it's active because I'm holding down my mouse. And the outline is because it's focused. And now it's a very nice green colored checkbox. So this is the checked state. I can also use my keyboard here to move back and forth. And I can see where the focus is. I can use my space bar. Now it's active. Now it's checked. And there's also an active state when it's already checked. So there is some fancy stuff going on. And it automatically skips the disabled ones. That's just how HTML works. It skips the disabled ones. Code wise, I use SAS because I do Ruby on Rails. And it's nice. And I use a lot of vertical space because I like breathable code. And I sort stuff alphabetically. If you totally hate that, you can fork this one and then sort them any way you want. But the entry point to the code is just this single selector, which is input of type checkbox. So you can do it this way. It will target all your checkboxes everywhere, which if you have already an existing application might be a horrible idea. Or you can use maybe a class name, fancy checkbox, to introduce it gradually to your application. So you can see here I'm hiding the native checkbox. And I'm setting opacity 0 and position absolute to remove it from the document flow. And then it's like, Ted, can't you just do display none? But you cannot, actually, because if you display none, HTML won't work with the focusing. So it will still work with your mouse. If you display none, you can still click and select the checkboxes. But your keyboard won't do any of the focusing, which I guess is sensible because you would go rather insane if your keyboard would select stuff that is not on the page. The label itself not very sexy. Here's the checkbox. And this is just the before Sudo element. So this just builds the unchecked box styles. Focused, active, checked, checked and active, disabled. And here is the checkmark. And that is really all the code there is. So it turned out kind of nice. You can see there's operating on checkboxes. There's a label. And then there's the checkbox with the variants. And there's the checkmark. So you don't need to get lost inside this. So including all the whitespace is like 134 lines. But I think the actual lines is something like 60. So there are a lot of possibilities here. You could use anything as a checkmark. Actually, here is a very fancy checkmark that I have no idea how it works. I just found this on the internet. And it does some absolutely crazy stuff with box shadow and transforms to create a checkmark. But you can potentially use anything. You can use an image, an SVG, something super fancy. You can use gradients for your background, which I tried. But it looked horrible, so I removed it. You can use transitions on the checkmark or whatever make it spin. Possibilities are endless. Some improvements. Relative positioning of the checkmark would be nice. Some more robust alignment of the checkbox and the label. I'll show you right now. I consider this to be sort of a hack because I didn't have a lot of time to fix it yet. Oh yeah, you can see this. This really hurts my eyes. But there is this vertical align that is hand tuned so that the checkmark goes nicely in the box. But this depends on the font, which is not so good because you don't know what font is going to be rendered to your user. So those are some things that are on my to-do list. I don't really know what's going on. Like I tried inline box. I tried flex box. But somehow the label wants to shift. So here is the link to the code pen. So if you want to play around with this or appropriate it into your app or if you want to fix some of the positioning things, you can use this link. And that's all. Thank you.