Hello and welcome back.
So we're talking about component's again and we're talking about input's now, we covered this a bit.
We're talking about just forms in general when I'm thinking about creating just like components around
input's.
There's so many different factors.
What I have here is I have my general input, which is like the base style here.
Let's go into it.
We have my right icon and within there I have my icon that I can swap out with anything.
I can hide this section if I need to in my content area over here and I have my text and icon little
component section and my text is over here.
And just like that, like if I decide to hide this, my text will just automatically be left alone.
So I'll show you what that looks like after once we create more instances of things.
And this is how I've set up my general input, very simple.
And everything else is connected to that.
I've also created a nice label.
Let's jump right into what a label looks like.
I have my left content on my right content.
You'll notice these little icons.
And that is just to indicate I have an orderly set up and that helps me create just like responsive,
not entirely responsive, but responsive within this sense that if I were to delete something the entire
with wouldn't stay just like the width of optional, it would shrink down to the label with.
So I have my left content, which is made up of my label copy and my optional indicator.
And then on my right I have like a little description and I have an icon if I need it.
And same thing is set up in Autolib, which will help me a lot.
So that is how I set up labels.
I have a word counter if we need that in the future, which is just a simple like text that I've used.
I've used my style here.
If we wanted to, we could maybe bring that up into like a topical style.
But I've left it at ten and I have a field message.
So if there is an error, if there's a success, same thing.
I have my icon, which is always going to be accompanied by text and I've said it to a certain with
that I know on mobile that I'm designing for now, there are going to be instances where you can't always
do this.
We are afforded that luxury because we are just working with mobile.
But remember, all audio just isn't there yet.
And I would be using that a whole lot more for things that I can expand in terms of the width and height
and have the elements still stay within that autolib properly.
Right now, they just don't do that entirely.
They don't work that way.
But this is really great for what we need it for now.
Now let's get into our variations of our base.
So I've done a couple of different things here.
The first section I've just done input's.
There will be times where you just need an input and no label.
Sometimes you may just need input with a placeholder.
You see them on sign up screens and I think that's totally fine.
I think that's one instance where you can just use a placeholder because it's just so standard.
You have your e-mail and your password, something very simple like that.
So I've done things like placeholder unselected.
I have it with a placeholder disabled with an error.
Same thing over here.
I've just empty states.
I have empty and selected, empty, disabled, empty, unselected with an error.
And the error is selected, as you can tell, with inputs and forms.
In general.
They are so complex.
I mean, just look at all the different variations that we have to design for.
That's not to say that we are going to use these all these variations to show every single use case
within a form when we're designing and presenting.
But this is like what I'm saying around design systems are for everyone.
We need to show developers what we're thinking in terms of the different use cases and what those use
cases look like.
So we have a field version and a field selected.
We have a field disabled, air unselected field air selected.
And in this case, you can only see a success message when it is filled and filled in selected.
You'll notice when it's filled in, selected.
We get a little bit of a thicker outline.
We get our carrot that's blinking in there and now we'll see actual form fields.
So with labels included, we have our label and what I've done here, you'll notice that it's just a
label.
Everything else is hidden just by default.
I found that that was just better.
And in the future, in most cases, this is how our label will be displayed.
But if we have like I'll show you an example in a second.
But basic.
It's a duplicate of this, but with a label included with a message text at the bottom included, if
we need a successor error messages, you'll even see I swapped out the icons for something that is much
more fitting for an error or a success message.
So let's get into how we can use just one of these assets, these components.
So I'm just going to actually show you how I would use it from the asset section if I were using it
within a project I'm going to go into here.
I can even search for it if I want to.
I can just search input and I could see all my types of inputs that I've created, which is a lot.
I can also just go into the input section.
So I'm trying to create a formula and I am going to see all these different instances.
And maybe this is a lot and you know, you don't want to see all these and you want to break it out
further and break it down into different frames.
You can do that, too.
I may actually do that at one point.
So if I bring my form, feel this is my field unselected, I'll see that my form field filled unselected
and I don't need to do anything here.
Where I'm going to do is I'm not even going to rename it or anything.
I'm not going to create a new component like when you are using it within your designs, we're using
them.
We don't have to recreate components.
Every time you use them or you change them.
They're there for you to just kind of tweak if you need, you can use them as is.
So if I were to call this one.
Birth date.
So my birth date and here I can start, you know, turning things off that I don't need.
So I'm just going to do that.
I'm just going to do that, and there you go, when I can also do is I can turn on my right content.
I can take that icon off.
And
and I can change that variation to like text gray like that, I can even make this one a little bit
lighter.
I think this one's already set to text great 80.
So there you go.
Like, you can just continue to create like a form like that if you need to.
You also notice, like, the same thing applies.
If I were to go here and, you know, tighten up that radius a bit, maybe make it only five pixels,
that's going to just be changed everywhere else.
It's reflected in all my designs, even my instances of the components that host that original input.
So if we look over here, I have that base input right there and it's going to be reflected there.
So that is how I would use them.
If I like, say, I had credit card information like a CBB, we have a way to toggle an icon.
And in that icon, we can go in here and let's change that instance.
We could have different types of icons.
I think this one actually suits what you would use for your CV.
So say, if I was like my code and we can, like, shrink down that text, what you could do is you
have to make sure that your field unselected is able to actually shrink properly.
So that is how you would create different types of inputs very easily with all the different variation
you need.
That includes things like different types of icons.
So if I wanted to go ahead and create like a search bar right here.
I have my search and I can use any which way I want, so that's an empty search and that is how I would
use it.
So you use all these different assets in a way that is going to help you.
But remember to create these different variations for your development team, for your whole team,
to understand all those different use cases.
Why would we see an error?
Why would we see like a selected say?
Why is there a disabled state?
You need to ask those questions.
Remember to go through your user flows and think about all those different cases.
And that is how we create components for inputs.