Hey and welcome back.
So we're going to talk about icons in forms or an input's more specifically.
So what do we have here?
Icons Input's, who would have thought?
Let's go over the three different scenarios that we often see when we're using them.
So just purely for aesthetic reasons, icons can be used like this over here.
They serve really no purpose, but just to reinforce the label or what is asked of the user.
These are generally in line with the input and left of the text.
So we have here just email.
We have a little email icon.
And on over here in this credit card input, we have a little credit card icon and zoom in just so you
can see that.
And they really serve no purpose other than to reinforce this.
In this label over here, so keep that in mind, they really help sometimes for accessibility reasons
as well.
I mean, just another layer of information that we're giving users for purely aesthetic reasons.
This is where they're typically used.
No.
Single, actionable.
Now, some icons will add functionality to your input.
Some examples of this are chevrons for drop downs, but we see over here on this select amount dropdown.
Also, some examples are like clear show height or any info like that that help to give the user additional
ways to interact with your input.
So if we have like a password input, we have like a show hide a little icon.
And what that could do is if a user started typing in their password, you can show the password and
what's actually being typed or you can hide it and just show the little circles just to hide that password.
So these are the ways that we can easily incorporate icons for just actionable reasons.
Now, typically, when we are actually creating dropdown or like select inputs like that, there's always
some sort of arrow or this Chevron.
So keep that in mind that you'll probably need that just to indicate to a user that this is a dropdown
input so they understand what they need to do.
So make sure that you understand that you need to use this icon in this scenario.
You don't necessarily need to use this icon right here.
The Chevron does let users know that this is a drop down menu.
It's totally built into this already.
Now, let's take a look at feedback, so feedback is another reason why we may use icons.
And typically, where you do see that is to help users understand if an action was successful or not,
these are often used in addition to color that is super important for accessibility because some color
blind users cannot tell the difference between red and green, and they will rely on icons.
So what I have here is a valid username, an invalid user name.
So if you look even closer, you can see that there's a little icon here beside that, that er text
and success text.
So this really just helps to reinforce what's happening and just give the user enough feedback to understand
that something went right in something didn't.
So that's using icons in input's.