Styling a Form Input

[00:00:00]
>> Steve Kinney: If button was the hello world and card was the okay, I want to see with more than one component. I feel like the one place that is the area in which most of us have to spend time when building kind of like a component library design system.

[00:00:18]
Form inputs, input fields, all of those things. Those are usually the heavy lifting of a lot of what we're kind of styling and designing. And you can see this version that I've got on the page here. We're gonna go jump back over to the skate park in a second and style one of these.

[00:00:34]
But if I just grab a basic form input, as you can see, Tailwind, again, is not like Bootstrap in the point where you can smell it from a mile away. It is simply a library for you to kind of like, use these utility classes. It does give you some default padding.

[00:00:50]
Which one. REM being 16 is not particularly controversial. The color palette is totally customizable, but like I said, it is not out of the box. Your app should not smell like a Tailwind app immediately, right? Because Tailwind does not give you a lot out of the box and you're still kind of like doing that theming yourself.

[00:01:10]
So this is our good friend, the input field. And what we're gonna do is not unlike the card. We are going to slice and dice it like a dozen different ways over our time together. Because there is a lot of nuance to all the things you can do.

[00:01:25]
If you think about, like, the default form state, what if it's required? What if it's invalid? What if it's all of these? What if it's a number field? What if it's a range? So what is the checkbox input? There's a number of, like, varietals of the input field.

[00:01:39]
That gives us a kind of a rich place to kind of go looking in this case as well. So let's go ahead and let's take a look at at that. If I go back into the playground, I can see that I've got an input, and cool, cool, cool.

[00:01:57]
This one has what looks like a little bit more markup, just simply because we're going to use it for a whole bunch of different purposes. I'm gonna look at just the code for a second and then we'll take a look at it in storybook too. But effectively, it's a div.

[00:02:13]
It's got a label, it's got an input, it's got a little bit of support for some ARIA tags. You can put a little description or an error Message again, just some templating so we can pop that stuff in with Storybook and not have to make 1000 of these and copy and paste our classes 1000 times.

[00:02:34]
Because like we said before, yes, that feels annoying. But arguably, in any larger code base, whether that's Ruby on rails, through jQuery, through React, through Svelte, through whatever, you probably have some kind of templating going on. Cool, all right, that looks like some markup where we've got just some placeholders in there and a little bit of conditional.

[00:02:54]
And in our Storybook side of the house, you're going to see that it doesn't look like much, but don't worry, we'll make it look like something. They're very close to what we saw on the page earlier. If you click on it, you will see the outline ring that comes from the browser.

[00:03:10]
That's about it. If you want to get rid of that, you can do outline none and you won't even see that. But what it turns out is you can do all sorts of stuff and you can see I made a bunch of stories here that are just little tweaks to the input field.

[00:03:26]
All this is is the same input field, but it's type email, right? You know, I guess they all have a placeholder. Yeah, this one has the description filled in. This one has an error. This one's a password field, this one's disabled. The other thing that you can do, especially if you have a little more screen real estate than I do, is you can go ahead and if you're just designing, you can toggle any of these the way that you want in Storybook, right?

[00:03:58]
Set any of the other properties that come with an input field however you might want if you need to test different states. But we don't need to do that. If you're playing around and you want to, it's there for you. But these are all the same input component.

[00:04:11]
These are not different files you have to edit. This is just one component with some different placeholder settings for you to experiment. Okay, so we wanna style this thing, right? And there is a lot of rich things we can do here as well. So we'll do some basic styling here where, like I said, most CSS properties that you would want to use have a tailwind class that is associated with them.

[00:04:38]
So, for instance, if we wanted to do the kind of more traditional thing where they stack, right, we can make them block elements, right? Just display: block. Anyone want to venture what that class is? Block, block, display, inline. Sometimes it's the property name in this case, it is the value dot block gives us display block.

[00:05:00]
Okay, now they're stacked. I could technically do that for the input as well. That feels right. So now they're both block elements. So they both kind of stack on top of each other. What else? You know what my favorite font weight is or should we do medium? Let's do medium.

[00:05:19]
I like semi-bold. You wanna see the difference? Semi-bold's a little heavier. Too dark, see? Semi-bold is 600. Medium, I'm gonna guess is 500. The default is usually 400. There's also thin. You want to go the other direction. There's bold, which is, I believe, 700. Don't quote me on that.

[00:05:40]
So we've got that. All right, we're getting there. What else do I wanna do? Label, you could theoretically do something. Like I said, you can use gray. I like slate. I read a blog post one time, like five years ago that said you should never actually use full black anywhere.

[00:06:00]
So now I take that seriously. I don't even know if it's true. It's just one of those things. As a front end engineer, sometimes I like cosplay as a designer, but I don't know what I'm talking about. All right, the input field, I mean, the label was not what was driving us nuts.

[00:06:16]
This is what's really hurting our feelings in this case, right? I don't love this, right? So there's a bunch of options in this case for stuff like focus or anything that happens on any kind of interactive level. Border is a bad idea because we know it's going to shift the layout.

[00:06:39]
I've seen it done both ways in different code bases. For an input, whether or not you use a border and then theoretically an outline for the hover states, or whether or not you just have an outline and then change it for the hover states, either. I think as long as you're consistent about that, if you have some inputs that do use outlines that have border, that's gonna be problematic cuz good luck aligning those things.

[00:07:03]
Either is fine with me. I've done both. It's fine. So let's do.
>> Speaker 2: Why do you have class block on the label and class block on the input?
>> Steve Kinney: Because they're both technically in-line, right? So I wanted to make them both block. At this point, one block, the other one will stack below it.

[00:07:24]
>> Speaker 2: Okay, so that doesn't carry through.
>> Steve Kinney: No, because it's only applying to this element. Right, block. Yeah, these appear so they wouldn't cascade anyway. But font and colors cascade layout does not. So we got it on both of those now they're both block elements and Cool. So now we can begin to style this one where there are a lot of things that we can do to an element in this case.

[00:07:51]
So let's see, we can go ahead and I'm gonna say, let's give it some kind of, let's do a border. Let's do the one that I didn't do in the notes. Why not? No, not doing that. I'm not doing that this time, Dustin. Not doing it. I'm not going rogue.

[00:08:14]
We'll give it an outline of 2, 1, okay? The nice part about the IntelliSense is if you have duplicate class names, it'll give you the brown squiggly. Because outline one and outline not only contradict each other, but they're also the same class, right? So let's just go with outline in that case.

[00:08:39]
So it's got outline. We'll say outline-slate.
>> Steve Kinney: Cool, and we were team rounded in this case, right? MD is too much? Steve's face said MD is too much. Feels better, right? You want some padding, don't you? You want a little bit of padding? I'll give you a little bit of padding.

[00:09:16]
Give it a little bit of padding there and we can give you a little py. I don't know. Let's do 1.5 in that case. Too much. Too much. That's the nice part, is that you can kind of see all this stuff. The other thing I might do here for right now is I'm gonna do space y.

[00:09:35]
Let's go with one. Just a little bit of breathing room. The nice part about using space versus using a margin bottom or margin top is when description or error show up, that spacing will be every element inside that division. So they will also get that spacing right. If you find yourself again like putting like MB1MB1MB1 to put a margin bottom on all of them but the first one, stop.

[00:10:02]
Take a moment of self reflection. Realize if something is that tedious, there might be a better way. So that space Y that we just saw earlier will work and we gave it a little space and it'll work for when the other stuff kind of comes in as well.

[00:10:15]
And like I said, you can check out one of those other stories. Be a little more screen real estate than I do. You'll see it immediately.
>> Speaker 2: Is it best to put that space on the div, the outside container there?
>> Steve Kinney: So space in this case, like flex and grid, will then put space between all the children, right?

[00:10:31]
So like everything but the first child is going to get a margin bottom in this case. So in that one you would have to put it on the parent and that would put the spacing in between all of its children. Cool, cool, cool. What else might we want to do to this?

[00:10:46]
There's tons that we can do right now it technically has a transparent background. So that doesn't matter cuz that background is white. Storybook does not like how zoomed in I am. So we'll deal with that in a second. It's technically transparent. So if you put it on a card that had that background, it's going to change.

[00:11:09]
So let's give it a background of white so it' stays. We don't see anything different there cuz white on a white background. Cool, and so now we've got kind of the basis. The other thing you can do, this is a personal design choice, I don't care, is you could decide if you want it to be the full width, right?

[00:11:29]
And so that one's just width full. And there are a whole bunch of other stops. There are even fun like fractional ones like width 1/3 and stuff along those lines or width screen all of the different variations. But width full is just a fun thing for width 100%.

[00:11:45]
Dustin, what's up?
>> Dustin: What is your reasoning for when to use Flexbox vs When to use spacing?
>> Steve Kinney: I generally think if all I am absolutely doing at all is just spacing on one dimension and I'm not doing stuff like aligning, you know, center aligning all the items or anything along those lines.

[00:12:02]
I will usually use the space. I'm gonna be honest with you, I don't know if this is true. I feel like if I just use Flexbox for one thing that I'm wasting a flexbox or something. I'm not convinced there's a performance hit. I have never seen one. But somewhere deep in my soul I feel like there is based entirely on feels.

[00:12:35]
And I feel guilty if I use a Flexbox when I could have used the space. That's not the answer you wanted. That's the real answer. But yeah, there are some implications of a flexbox and flex items, so on and so forth. Have I ever been bitten by them?

[00:12:48]
I have not. But I understand there's probably a reason why they exist. I don't need to get bitten by Them to find out. So, yeah, if I'm only using it for the spacing, only in one direction and not using it to reflect stuff, I will go for space.

[00:13:02]
But part of that is emotional. Sorry, [LAUGH] it's true. Cool, so then we can kind of talk a little about these focus states. And there's various focus states that are present here. In this case, we've got this outline of four that I kind of put in there while I was talking.

[00:13:29]
Seems a little egregious. Blue-400, I like that. And the outline is slate normally. I could also go for 600 both ways. All right, so now when it is focus, it will get that as well. So you kinda like, either way, cuz inputs get the focus also when you are typing into them, right?

[00:13:58]
There are a few other cool things and we can argue are these tailwind, Are they css? They're technically css, because tailwind is just CSS that you can do where you can say, let's make the placeholder. The color one is super easy. And then we'll show there's a variant for the rest of this.

[00:14:22]
I'll do something a little more egregious here so that [LAUGH]. This is like, yeah, on one hand, I'm trying to make this realistic. On the other hand, this is no place for subtlety. You can see I can make the placeholder red, which is a ridiculous idea. But just, you know, going from kind of a gray to kind of a bluish gray does not really make my point the same way red does.

[00:14:43]
And you can also even, like, there is also a placeholder variant. So I can say placeholder, and I could say, like, italic. Now the placeholder is italic, so you can style that placeholder as well with all these. I don't actually want to do that, though. That looks stupid.

[00:15:11]
So we'll get rid of that. But yeah, I could do something like placeholder, slightly lighter text, whatever you want to do. So you can style that as well. The other thing you can do in tailwind, depending on what you are trying to achieve, is for most things, we've only talked because we're positive people.

[00:15:39]
We've only talked about a positive value. For instance, what if you wanted to have the outline offset? We know how to do. Let me give it a border for one second. And I can do outline offset. Let's do something a little more. So I've got that outline around the input field.

[00:16:14]
And so the other thing you can do if you wanted to at any given point for a lot of these classes, is you could give it a negative value. Most of these variants also have a, actually not of all things, not an outline. That's why ring exists, right?

[00:16:32]
But if you wanted negative margins, this is negative MT2, negative MT4, like a dash before that will be the negative value in either direction. Outline, you can't have an inset outline. Well, mostly because those words don't even make sense, and that's why you would still use a ring for that.

[00:16:49]
But you can do negative values as well.