Hey, everyone.
Welcome back.
So we're going to be talking about building input's with atomic elements, so I hate to call this inception
because sometimes components can get pretty complex.
Now, if you notice, we just have a field here.
And, you know, essentially this field isn't going to be the only part of the component that you use
to actually create an input field.
You're going to have other components as well.
So one of those components could be something like a label, and we can create our own little label
component and I'll show you how that works.
So what I've done here is I have some texts.
I think that's fine in terms of the typeface choice.
You can probably give it.
I think that's cool.
OK.
So this is our label.
And we are just going to.
Do that, we're going to duplicate it here, and you may have noticed that this is pretty similar to
the type of inputs that we use in our demonstrations earlier on, like forms, inputs and buttons and
stuff like that.
And I'm going to show you just how I did that.
So this could be like a description.
We're going to write a line that.
So what we're doing here is we're making a component just for labeling, drop that down to 50 came and
go probably down to 25 percent.
Uh, actually, let's just jump up to 50 and we're going to make that regular.
So this is our other component.
I switch that.
OK, I'm not going to allow my label to go further than this, and I'm not going to allow my description
to go further than that.
OK, so we've set some constraints in there.
We can also do is go into our assets and select an icon that we want to use.
And now the great thing is like we can show and hide these things.
So we have a description Eikon.
Info icon, so it's an instance of another an icon component, and if we just option comen, we've created
a frame and we can call this label.
And what I like to do is I like to just kind of hide these images, so.
There we go, perfect, and we can create a component.
And know we have a labor component.
Let's talk about how we can use this in conjunction with this input, sometimes we find ourselves with
the component that is pretty complex.
You know, it may not be really, really complex.
I mean, some do get that complex, but they may feature something like labels like you've seen here,
different types of text elements, different icons.
So what's the solution, you may ask?
We can build components within components.
So that's why I mentioned Inception.
You can create a component for that field element or label and place it within your input component
so we can put these together to create an input component.
And every time you update that like individual element, this one or this one, it's going to change
across the board.
Sometimes you may do this depending on the context, like changing just like border radius or just label
fill colors.
But it's just so easy using these kind of I call them atomic elements.
It's just a game changer when it comes to building, customizing and maintaining components.
So let me show you what we can do here.
So I'm going to do is I'm actually going to create a just a text component.
I just called it input text.
And this will be the main copy that goes within our input.
We're just leaving this black.
I think that's good.
I mean, we can even bump it up in size a little bit and we're just getting to that.
OK, so that's fine.
So these are.
Master components, what I'm going to do here is I'm just going to create this as a component.
So there we go.
When we're going to do is I'm going to take all these duplicate them as instances.
Now, I'm going to place this.
Just above the input, I'm going to place the input just to the inside of that, so if we are using
our base unit.
We should be spacing with our base unit, so this will be let's just check if our preferences are proper.
So we have a engagement, so for good, so I'm just going to shift option and OK, and there it is,
eight pixels from the edge over here, I'm just going to do the same.
I think that's fine.
So now we have our whole component.
And what we can do is we can also.
And you can tell.
That stretches just beyond their.
If you hold down shift control and the arrow key, you can shrink it by your judgment.
So I've shrunk it, as you can tell from where it was before, aligned over here to eight pixels within.
So now I'm going to select all of these and I'm going to create a component that automatically gives
it a component name.
And I'm going to call this.
Form a field.
OK.
These are atomic elements and this is our kind of our larger, more complex component and what we're
going to do is we're going to change the border is to one hundred.
And as you can tell, it also changes the border radius over there.
So if I set the 20 or five like I originally had it, it changes it.
If I think that this text is way too small or too large, I can bump that down a bit.
If this label I feel like is too dark, I can change that as well.
And all of a sudden.
This instance.
Has changed based off of the changes I made here, so build your components with the Tomac elements
and you can easily have so much control over your larger, more complex components.
And that's an easy way to use atomic elements within Vigna.