Checkbox focus-within

[00:00:00]
>> Steve Kinney: Let's play around with focus within for a second, right. And see like you're like, this seems great. When would I want to use it? Let's take a look. So we're going to go take a look at our good friend the checkbox. Because the checkbox also has some interesting and fun things that we can do to it as well that allow us to explore some other fun features.

[00:00:26]
So we can go our good friend the checkbox over here, it's just an input field. The only thing is I said no matter what you are, type checkbox. So here, I've got a checkbox. I can check it where focus within or any of these things can become kind of powerful is.

[00:00:45]
Let's say we gave this class, padding, I don't know, just give it something. We're team rounded. I noticed sweet. So we've got that kind of styled now I could focus the checkbox, but what I could also do is I could say focus within. And in that case we're gonna say that the maybe the, Outline offset, I don't know.

[00:01:46]
So now you can see that also the parent will also get styled. This also can be useful. Like that seems fine as well. And so if they are tabbed into it, we can change the entire element as well. There are some other things we can do with the checkbox too itself is looking a little kind of squirrely when they hover over it.

[00:02:12]
So we could say something like we'll play with a fun one first. Which is by default they check it. Look, it's blue. Which very much works for my particular use case. But like, what if the brand. What the brand is purple, right? You can do that as well.

[00:02:39]
You can say accent purple. I don't know, 400. And now if they go check it, you can see now it's a purple checkbox. That way you can access the underlying pseudo classes in the browser and style that as well and have all of that in place too. And as you can see as they interact with it, if we had more than one, whichever one they clicked on last would be the kind of focused one in this case.

[00:03:11]
But the entire section. So if you have something around it, you need that ceremony focus within is good for that. We'll actually see a really good use case for that a little bit where if we wanted to have an input that looked like it had a button in the middle inside of it, we could use it effectively.

[00:03:27]
Having the div around it look like we're focusing the input and the input to have nothing. We'll see that in a little bit as well. But yeah, you can kind of see you can do accent. We can also do stuff like but yeah, focus is no matter what focus visible is if they got there from the keyboard.

[00:03:44]
And then focus within is if any of the children are focused. I guess technically there is no focus visible within. We can add that to the web too. That's at some point if we all want to do that as well, cool, cool. But now what we want to do, it's one thing to say, hey, I want the parent styled if something is focused inside of it.

[00:04:11]
What if I want to do something like, hey, I would like this whole checkbox to be different if it's valid or invalid checked or unchecked. What if I want one thing styled differently based on something else in there as well.