Learn how to use nested symbols to create a form system with different states.
- [Instructor] Let's take it a step further and create a nested form field, or text input. We're going to look at the different states of the form field like we did with the buttons, default, hover, and disabled. We're also going to add in a focus state and the validation states success and error. If you're not yet comfortable with nested symbols, I would suggest watching the video on creating a button system earlier in this chapter. Let's check out my sketch document. As you can see, I have six different states here, and they're all using the same symbol, Text input/default.
I'm going to double-click in to one to inspect it, and you'll see that the symbol for the text input consists of multiple different nested symbols in the correct order. So we have the label, here, which is the text at the top of the form field, and this is inheriting the text style that we defined, Label/Small, over here on the right panel. We also have the actual text which is what the user would input into the field. Under that we have the hint text, or the placeholder text, and that's what appears before the user starts typing.
Then we have an icon on the right in case we need one for a drop-down or maybe an x to delete that text that the user has typed in. And then we have the actual container for the field, and this is what controls the actual states, the default, the hover, the disabled, focus, error, and success. You'll also notice that there's this space here, underneath, and that's for the error and success states. So we actually have this blank space that I'll show you how to create for those states.
You'll also notice that we have some padding here, two pixels on either side. You'll notice that we have two pixels and that's for the focus state, here. So we create actually a focus border on the outside, and that's what we'll need to fit here, into this container. So, since we understand nested symbols and how they work, let's go and create this thing. So let's go over to the example art board here. First, we're going to just make a rectangle here and we're going to make it 290 by 40, and we're going to get rid of this border.
And we're going to remove the fill, and we're going to make it have a border of, let's say this color, and a border radius of two. Then we're going to insert a text style, so I'm going to go up to the top here, text style, and I'm going to grab the small label here, and I'm going to type Label, just for the text label, and I'm going to align it with the end here, so it's all lined up, and just make sure that it's an appropriate length from the label.
Now we're going to add the placeholder text. So I'm going to insert another text style here. And I'm going to go down and insert the placeholder text right here. And I'm just going to type in placeholder text. And I'm going to extend that across here in case we have text that is longer than placeholder text here. Now we're going to add in the field text. So go to insert, styled text, body style, medium, and I'm just going to type in text here, and I'm going to align it up with the placeholder text.
And now I'm going to insert an icon. I'm going to go back to insert, symbols, icon, and I'm going to insert the triangle down arrow, and I'm going to put it right here, I'm going to resize this 'cause it's a little big. I'm going to make it 24 by 24, and then I'm going to align it, here, and move it down just a little bit here.
Awesome. Now I'm going to drag the icon to the bottom of the layer list here, right above the rectangle, and I'm going to select all of these elements, and I'm going to create a symbol, right up here. And I'm going to call it text input/default1. Alright. Let's double-click to inspect this.
Now that we're on the symbols page, we're going to take this rectangle here, this container, and I'm going to create a symbol here, and I'm going to call this symbol field/default. So this is going to be the containers for the states. So we have our field/default state. I also want to group, go back here, and I'm just going to group the text, the placeholder text, the label, and the icon, and I'm just going to group these in a group called input just for organization's sake so that we know that all of this is the input and then we have this which is the actual field default and the container.
I also want to put the emojis for organization's sake on ours, so I want to make sure I have label, so I want to make sure we have label here. I want to grab the hint text here, and I want to put this up here in the hint text, and I want to also grab the regular text here, regular text here, and the icon, lastly. For organization's sake, this is really, really helpful when you have a lot of overrides, and this is a perfect example of when you're going to have a lot of overrides.
And because I'm going to add the error and success messaging, I'm going to actually drag the bottom of this down to 88 pixels, so that we have room for that message here, and I'm also going to drag this down to 64 pixels so that we have room there, as well, for that error state. So now, I'm going to create another one, that is field hover, so I'm just going to duplicate this and this is going to be field/hover, hover here.
And this field hover is going to have, maybe we give it a darker border, and maybe we also give it a little bit of a shadow, so it's kind of more of a hover state, and let's just take this opacity down a little bit here. Now I'm going to duplicate this one, as well, and this one, this one is going to be field/disabled, and this field/disabled is going to have no border, but it's going to have just a light gray, no border, no shadow, and it's going to have a light gray fill, maybe like this.
Then I'm going to duplicate this, and create the field error. So what I'm going to do here, is this is going to be field/error, and I'm going to have this have a red border here, and maybe a fill of the red at, let's say, 5%. So we get that error. And now what I'm going to do is I'm going to insert an icon here, so I'm going to go insert, symbol, icon, messaging, let's go with this icon here, and resize this 'cause it's a little big, 224, and I'm going to make it red.
So we already have this icon override, which is why we can do this and make that red right there and insert this symbol, and then what I'm going to do is I'm going to insert a text label. So let's go to insert, styled text, and we're going to through our label, small, and we're going to say This is an error message, here. So, let's move that there and take this color to red, here. So there you have it, now we have our error message.
And I'm also going to drag this to the end in case we need that to be a little bit longer, as well. And then, now that we have this icon, let's go ahead and put this little icon emoji here. Alright. One last one. We're going to duplicate this, and we're going to make the field success. So this is field/success, and let's make this green, with a green border.
Maybe it can have a fill of green at 5%, and we're going to make this green as well, and let's change this icon out to be, um, we can actually do it over here, if we want to, icon to be, um, this check. Actually, I like the other check better. Let's do that one, this check. And let's make this a green check, messaging. And now I'm just going to change the text to success.
So this is a success message. So what you can do here, if you want, is you can actually detach the icon from this symbol here, so that designers actually can't change this, so that's what I would recommend doing, is actually taking the success and error message icons out of a symbol, so that a designer can't accidentally insert a different symbol, just to keep that consistency's sake for the design system. But for the sake of this example, I'm just going to leave it. And for these I just want to make sure that we group these together, so I'm just going to move these up a little bit.
Okay, so let's go to our example, our board, and let's check it out. So, here, we have a text input default, and over here, we have all of our overrides, we have our text overrides, so I can put Anne in there, if I don't want any placeholder text, I'm just going to put a space. I can put a label in there, maybe a name. I can put an icon in if I wanted to. If I don't for this example, I can change the color. I can change the field to disabled. I can change the field to error, here.
This is an error message. We can change this icon here, if we want to, for example an x or that kind of arrow or anything there. We can change the color of that if we want, so this icon is actually for this right here, and these are for the error states. So whatever your design calls for at that particular instant, you can use one symbol and take all of these overrides for that one text input symbol. Now you know how to use nested symbols to make icons, buttons, and form inputs, all while pulling from color symbols and text styles.
Now that crucial components are connected through nested symbols, we're going to be able to easily make modifications on part of the system and then verify the repercussions on the rest of the system. A modification to a component of our system will automatically reverberate across all of the components. By interlinking all of our components to each other, that means that if we create a new component, it's the heart of the system that's going to be impacted, not just an isolated screen.