Input with Button Component

[00:00:00]
>> Steve Kinney: So let's say again, every app is really a to do list. But theoretically, this is for if we wanted to have a, I like to call it, sometimes just a single input form field. Like again, submit message one input, submit, so on and so forth. And so that one really doesn't like it when I get real small, and I get big again.

[00:00:32]
So this is kind of what we start out with here, and we wanna kind of create the thing of an input field that then has a button inside of it. So it's like one unit. You might also see this as like, it's like an input field and then the button's kind of attached on the end.

[00:00:49]
That also could work. It's honestly a styling thing at that point, maybe we'll try both of which you'll. If I feel spicy and still good on time, we'll see. Okay, so what we can do is point. Now the fact that the label has no styling. And this is when I warned you in the beginning of the workshop, it might be really tempting to open up that base layer and be like, why aren't all my buttons on all my inputs to have borders and all of these things?

[00:01:12]
And then you will regret it. Ask me how I know. Because I too, if you thought that in the beginning, I too was you at one point, and now I am no longer you. So in this case, what we're going to go for is we're going to look at a few different things, right?

[00:01:32]
You're like, what if I don't want to show a label? What if I just want an input field? I wanna say what it is in the placeholder. You can do that, but that's mean. I mean, you can play around with some aria labeledby things and so on and so forth, but generally speaking, the label is useful for screen readers to announce what it is.

[00:01:53]
So let's say we don't want to show the label at all. I can use this tailwind class called SRO only, which is screen reader only, right? You say, but it's still here. Because I put in the for field, not the class. If you don't type it in the right place, it doesn't work.

[00:02:14]
SR only. So it's vanished, but it's not, right? SR only basically keeps it where it was on the page, but puts it off of the page effectively and hides it. A screen reader will still announce the label of this as like, we should really do this as new task, we're being.

[00:02:40]
So if they use a screen reader, and they navigate over, there's still a label in DOM. But visually, for anyone looking at the page, they don't see it anymore, right? So it's a way to kind of get some accessibility, niceness. And again, could you write that class yourself?

[00:02:58]
Yes. Do you want to? No, so it kind of just moves it out of the way. So now what we wanna do is we're gonna kind of style the form a little bit to look like we had with an input field before. So we'll say class and we're going to say, I don't know, we'll give it a outline-outline-slate 600.

[00:03:28]
Okay, we're getting there. So we give it some padding on the x axis of 3, some padding on the y. 1.5. All right, all right. We're going to accidentally learn a little bit more about flexbox in a second here because I got excited to do this. And we'll then talk a little bit more of flexbox in a second.

[00:03:53]
Then we'll style the button. Theoretically, we could have used any of those other buttons we had before, but we'll just bring this in real quick and we'll give it a bg. We did blue buttons the whole time, doing a purple button. PX, I don't know, 3. Again, we decided we're team rounded, if I'm not mistaken.

[00:04:21]
Cool, and we'll give it a text of white. Spell white correctly. There we go. The next thing we do is we will make this a flexbox. We'll talk a little bit more flexbox in a second. We'll say flex and we'll say that the input field gets to take up more space and we'll make this.

[00:04:50]
I forgot we're team rounded. I just went through, like I said before, I went through the great unrounding in the UI that I worked on. And so now I have to remember that we like rounded. I like rounded too, to be clear. Okay, it looks like it, but like ew, right?

[00:05:07]
And would like to do all that. I would like basically to take the fact that it looks like this is the input field overall and make it behave like that. So what I could do in this case is we do need to remove that. I think I can just do outline.

[00:05:27]
None. We'll find out together. Okay. But now there's still no visual feedback. There's no focus, there's nothing. So what we'll do here is we'll say outline. And again, if you wanted to keep the outline, but then put a ring around it. That's where the fact that rings still exist could be helpful.

[00:05:59]
So let's actually do that. We'll say ring two and we'll say ring purple. So now we get a little focus state there. That's nice. I guess I could have changed the outline color too. That would have worked but now I get both. Cool, so now it looks but it works for focus.

[00:06:35]
But what if we wanted to do that invalid valid kind of thing as well, right? That's where has becomes interesting because it can then query about the input inside. So we could do something like has invalid ring-red 600, do has user invalid, and we'll make this required. Let's just go to regular invalid for a second.

[00:07:40]
Let's see what happens when I get fancy. Let's try it with the outline for a second. Watch this as I pick too. Darker red. Not totally sure as I wing it on that one. If you put the required on the label it's not going to do anything. Just FYI, in case you're wondering.

[00:08:22]
All right, there we go. I'm not insane, I'm just in a very zoomed in window. Cool, cool, cool. So we'll do the has user invalid. So now they go in, they leave. Maybe it doesn't work on required, but yeah, we can start to especially make this an email.

[00:08:58]
We can see it super easily. They go in, they leave, they type in some bs, they leave. Now it's red. But now we have what looks like an input field with a button inside just styled by a mixture of has focus within. All of these tools come together to make some of those more polished and professional looking UI components that might have taken a while.

[00:09:24]
Very quick and easy to the point where someone can live code on a zoomed in screen in front of friends while also talking and whip one up fairly quickly and elegantly.