1
00:00:00,360 --> 00:00:01,680
Hey and welcome back.

2
00:00:02,100 --> 00:00:07,100
So we're going to talk about icons in forms or an input's more specifically.

3
00:00:07,920 --> 00:00:09,360
So what do we have here?

4
00:00:09,990 --> 00:00:12,240
Icons Input's, who would have thought?

5
00:00:12,240 --> 00:00:16,430
Let's go over the three different scenarios that we often see when we're using them.

6
00:00:17,100 --> 00:00:22,230
So just purely for aesthetic reasons, icons can be used like this over here.

7
00:00:23,510 --> 00:00:28,580
They serve really no purpose, but just to reinforce the label or what is asked of the user.

8
00:00:28,780 --> 00:00:32,300
These are generally in line with the input and left of the text.

9
00:00:32,750 --> 00:00:34,210
So we have here just email.

10
00:00:34,220 --> 00:00:36,020
We have a little email icon.

11
00:00:36,020 --> 00:00:41,420
And on over here in this credit card input, we have a little credit card icon and zoom in just so you

12
00:00:41,420 --> 00:00:42,050
can see that.

13
00:00:42,590 --> 00:00:46,880
And they really serve no purpose other than to reinforce this.

14
00:00:47,980 --> 00:00:53,420
In this label over here, so keep that in mind, they really help sometimes for accessibility reasons

15
00:00:53,540 --> 00:00:54,100
as well.

16
00:00:54,110 --> 00:01:00,320
I mean, just another layer of information that we're giving users for purely aesthetic reasons.

17
00:01:01,030 --> 00:01:02,660
This is where they're typically used.

18
00:01:03,260 --> 00:01:03,530
No.

19
00:01:03,530 --> 00:01:04,640
Single, actionable.

20
00:01:05,860 --> 00:01:08,560
Now, some icons will add functionality to your input.

21
00:01:08,920 --> 00:01:15,370
Some examples of this are chevrons for drop downs, but we see over here on this select amount dropdown.

22
00:01:15,490 --> 00:01:22,480
Also, some examples are like clear show height or any info like that that help to give the user additional

23
00:01:22,510 --> 00:01:24,190
ways to interact with your input.

24
00:01:24,550 --> 00:01:29,320
So if we have like a password input, we have like a show hide a little icon.

25
00:01:29,320 --> 00:01:34,870
And what that could do is if a user started typing in their password, you can show the password and

26
00:01:34,870 --> 00:01:39,760
what's actually being typed or you can hide it and just show the little circles just to hide that password.

27
00:01:40,210 --> 00:01:46,510
So these are the ways that we can easily incorporate icons for just actionable reasons.

28
00:01:46,990 --> 00:01:51,700
Now, typically, when we are actually creating dropdown or like select inputs like that, there's always

29
00:01:52,150 --> 00:01:54,700
some sort of arrow or this Chevron.

30
00:01:55,270 --> 00:02:02,020
So keep that in mind that you'll probably need that just to indicate to a user that this is a dropdown

31
00:02:02,350 --> 00:02:05,230
input so they understand what they need to do.

32
00:02:05,350 --> 00:02:11,030
So make sure that you understand that you need to use this icon in this scenario.

33
00:02:11,290 --> 00:02:14,140
You don't necessarily need to use this icon right here.

34
00:02:14,950 --> 00:02:19,230
The Chevron does let users know that this is a drop down menu.

35
00:02:19,270 --> 00:02:21,310
It's totally built into this already.

36
00:02:22,640 --> 00:02:28,280
Now, let's take a look at feedback, so feedback is another reason why we may use icons.

37
00:02:29,580 --> 00:02:35,180
And typically, where you do see that is to help users understand if an action was successful or not,

38
00:02:35,880 --> 00:02:40,590
these are often used in addition to color that is super important for accessibility because some color

39
00:02:40,590 --> 00:02:45,330
blind users cannot tell the difference between red and green, and they will rely on icons.

40
00:02:46,110 --> 00:02:49,500
So what I have here is a valid username, an invalid user name.

41
00:02:49,690 --> 00:02:56,940
So if you look even closer, you can see that there's a little icon here beside that, that er text

42
00:02:56,940 --> 00:02:57,900
and success text.

43
00:02:58,830 --> 00:03:04,470
So this really just helps to reinforce what's happening and just give the user enough feedback to understand

44
00:03:04,470 --> 00:03:07,710
that something went right in something didn't.

45
00:03:08,630 --> 00:03:10,790
So that's using icons in input's.