Required Field Indicator

[00:00:00]
>> Steve Kinney: So yeah, we could. Theoretically we have the checkbox open. So I'm gonna do, no, I'm gonna let you do this one. I'm gonna do a slightly more complicated one and then I will tell you what you're gonna do afterwards so you can think about it in advance, which is we want to do something similar to what we saw earlier, where if the checkbox is checked, we want to change the entire parent and maybe, yeah, like, like maybe we refactor out peer, but let's do something that has been like I remember the last time we did this course I joked like I did a bunch of squirrely stuff because you couldn't fully do this, especially in tailwind at that point.

[00:00:39]
And the support for has wasn't totally there yet, but now you can do it, which is one of the patterns that I wanna do. And again, I don't wanna write any JavaScript, so I'm not writing JavaScript today. Write JavaScript all day, every day. I don't want to write JavaScript today is I want to do the pattern where if a input field is required, I want the label to have a little red dot after it.

[00:01:03]
Right? Previously you couldn't do this just in CSS because you could. Like if the label came before the input, peer wasn't going to help you because peer can only help the things afterwards. So previously you either A had to use JavaScript or B the dark pattern that I did was I put the label after the input and then Flex reversed works.

[00:01:31]
I used it forever but now I never felt good about it. How about that? Now I don't have to do that anymore. I have that input that we were playing around with before. Gonna just get rid of the sidebar, put you over on the side. Nope, you can take up the full height and then we'll grab you.

[00:01:59]
Nope, there we go. We'll go into Storybook and let's find the input. This required input, right? Now there's no visual indicator that this input is required and we'd love to handle it. What I want to do is a little red dot or something right here if it is in fact required.

[00:02:28]
But the thing is, again, we can't use peer because you can only go from the input afterwards, right? But I can use the combination of group and has together now in order to actually implement this, the squirreliest part is going to be putting the actual red dot, not the actually figuring out if it should be there.

[00:02:50]
So let's kinda do this iteratively. And what we're gonna do is we're going to say that the parent, in this case, the div, is gonna be one of those group components. So now children can ask about their parent, right? And that parent will be group in this case.

[00:03:11]
Great. And so we have that. And so for label, what I want to do is you can if you need to do those before and after pseudo elements, you know that colon, colon before, colon, colon, after, you can do that in tailwind. I will warn you that the class names themselves can be a little verbose, but arguably still less characters overall than what you would do line wise in terms of css.

[00:03:38]
So you can do something after which will be the after pseudo element. Say after and we say the content. We'll start with something simple. And you'll see originally this is somewhat problematic because that's just gonna put that after the label no matter what, right? And so if I go ahead and I let's make you go to the bottom.

[00:04:07]
Whether or not it's required, we still see that. So let's deal with that in a second. I'm gonna give the after a margin left of, I don't know, 2, okay? And I'll give the after a text read 600. Okay, but like I said before, not great that it says required even was not required.

[00:04:40]
But luckily we can fix that super easily. Where we can say just where is that content? We could say, group has, Input that is required. So now if it's not required, we don't see that if it is required, we do just pure CSS. No JavaScript has to change.

[00:05:16]
All that has to happen is if the required attribute is on the input, we get it. And so a lot of times you won't see the full word required. You'll see something like at that point I might move it a little bit closer. But now by default, now whatever use input if it happens required you see it.

[00:05:33]
No JavaScript needed. And then I am insane. So a lot of times what I'll do is I'll do after block after width 2, after height 2 and then I'll get rid. I'll make it just empty content. I think I did it after, no, I did after block, after height 2, after width 2.

[00:06:11]
Got to make the entire thing flex. It's just going beneath it. So you can make the label instead of block. We're gonna make it flex. What am I missing? After block after height 2, width 2. Instead of text red. No, we need that. That IntelliSense not helping me when I've Got word wrap like that we can do.

[00:06:52]
We'll talk about flexbox in a second but now I can get this nice little pretty dot. Never write a line in JavaScript. There are a lot of after selectors there. I don't insist that you do that. You could just use the asterisk or required or some word like that as well.

[00:07:05]
But now you can theoretically again this will just now work whenever. Let's refresh that, make sure that sticks. We saw that with the dot before. Yeah, I know what I did. I might have to do group has on a bunch of these as well. So we can just go with the star too either way.

[00:07:40]
Cuz you can watch me type that over and over and over again, but the previous example we had before two will work. We could also make. I'll show you how to make a variant in a second too where you can like if you find yourself doing that too many times, we can go ahead and just make the simpler version group as required and then return it.

[00:08:03]
True. Do it inline. A lot of times you'll see this instead because it is like way easier. But yeah, required, not required. All there. And you can style it as much or as little as you want. We can even take off that ml-2 if we're just doing the asterisks.

[00:08:23]
But yeah, now you can do a bunch of powerful things where you can figure out if any element I can sell before, I can sell after by kind of doing the bidirectional hey parent, do you have this? Hey, like ask your parent if you have it right and then like earlier peers can have it, so on and so forth.

[00:08:39]
There's a bunch of places where you can do this as well. Like it's one of those things where it's like there are some very like high level like yeah, the required field having again like if someone checks the like a given pricing thing that we saw before or a checkbox and they agree to the terms of service, you want to do something.

[00:08:59]
It's one of those things where it's like there's some very kind of standard small little niceties. But then there is probably that thing where you found yourself doing a bunch of JavaScript shenanigans that you like. It's like I joke some of those features where it's like a week from now you'll be taking a walk and be like I could just do that and take that 10 lines of 20 lines of code and turn it into just a few CSS selectors, right?

[00:09:25]
And all code that you have is code that can break. So the less of it is, the less of a liability.