So let's talk about best practices for inputs, so I want you to take a guess, which are the most complex
UI elements.
If you've guessed it puts, then you're correct, they may look simple, but in reality, due to their
versatility, different states and frequent use, it can be very hard to figure out.
But when you do get inputs right and they're designed really well, they allow users to input data in
a way that is quick, easy and correct.
So let's jump right in.
So these are the types of inputs that you're probably going to encounter the most in your career.
Here we go.
Some basic inputs.
Now, there are a variety of input types that we use to collect user data.
Depending on what types of questions or requirements your form may have, you'll need to pick the right
one.
So the first one I have here is a TextField.
Now, these text fields are used for short written responses.
Users can add only one line of text through text does get to long.
It will automatically scroll the content left so you can continue to see what you're entering.
So if I were to start entering a name here, it would just push the rest of the content left and you
just be able to continue to see everything.
The next is a text area.
Now, sometimes you may need to incorporate an input for longer responses.
This is where the text area comes into play.
These are taller than a regular text field.
And as you can see, look at the difference.
And allows for users to enter multiple lines of text when the text does reach the bottom of this container.
It will automatically expand downwards some text areas, allow users to adjust the width and height
manually.
It's just going to depend how it's coded by the developers.
Next, we have dropdown menus or Selex, these are used when there are multiple options a user needs
to choose from.
When you click, the input menu will appear just below where the user will see the predefined options.
When a user selects an option, it will appear in the input field that they just clicked.
It's best to use dropdown menus when the user needs to select from more than five options, but not
too many, because then it becomes a little bit of an accessibility issue.
Next, we have checkboxes checkboxes are typically used when there are one or multiple options for the
user to select from users can make multiple selections here.
As you can see, try using these when there are four or less options to choose from.
And next, we have radio buttons.
Now, these look pretty similar to the checkbox, but the interaction is entirely different.
These are used for multiple options.
But and this is big.
Users can only select one option here similar to the checkbox.
Try keeping the options to for less.
So if I were to have option three selected and I go to select option one, it would automatically uncheck
or select three and one would be the only option selected.
If you do want to select multiple options, use the checkbox.
Now, there are some advanced inputs and let's get into that.
So sometimes these inputs are not enough for what we're asking of a user, some questions can get pretty
complex and also some interactions.
So let's look at some examples of that.
Right now, we have a multi select textfield.
So what you can do here is these fields allow users to add multiple inputs.
Generally, when a user enters and input, it will be displayed as a chip.
And this is what a chip looks like.
I mean, you can design it differently, but typically it's just it has the content in the middle and
then it has an exit or a removal icon to the right.
Now it will be displayed as a chip and the user can add another.
Users are also able to remove chips that they previously entered.
So this is typically what a multi select textfield would look like.
And this is a dropdown search, if there are a bunch of options within your drop down menu, you should
consider adding some sort of contextual search.
The way this interaction works is when a user begins typing available options that match the user's
search will filter it saves the user a bunch of time.
So if I were to type in an address or like a country or something like that.
So this input source country but could just say something like address, then it's just so much more
easier than just inputting everything manually.
Or if they need to search for a specific country, then they could just start typing and the list would
come up over here have suggested results.
So it just gives the user a bunch of time and that's it for advanced inputs.
These are typically all the types of inputs that you would see, both basic and events or some sort
of variation.
I mean, there are many more there are deep pictures and pictures are used only we to our user to select
a day or date range.
It really depends on the type of product you're building.
So there are a bunch of inputs out here, but this is what you're typically going to be using most of
the time.