Input Fields
This component allows the users to enter information
on-screen using the keyboard.
Use Cases
- When the information required by the system is more specific and cannot be introduced by a simple click/tap.
- When, even if the information can be chosen from a list, it also can be introduced with the keyboard.
This is where you would put
directions or extra information
Invalid Example
Success Example
This is where you would put
directions or extra information
Invalid Example
Success Example
This is where you would put
directions or extra information
Invalid Example
Success Example
HTML
Do's & Dont's
Be concise and contextual
Users will look through a form very fast, in order to understand
what information is he requested for.
Be concise and specific on Fields' titles and placeholders, in order to help them. Also, consider grouping the fields related. Keep everything contextual.
Be concise and specific on Fields' titles and placeholders, in order to help them. Also, consider grouping the fields related. Keep everything contextual.
Different ways to help
When the user reads the instructions and advices on a form, it is
important to help them understand if the information given applies
to the section in general, the form on-screen or only an specific
field.
We have different ways to assist the user on this: A text section, a tooltip or a helper text below... It is our choice, but we need to keep it practical for them.
We have different ways to assist the user on this: A text section, a tooltip or a helper text below... It is our choice, but we need to keep it practical for them.
A text input? Only when really need it
Not every bit of information requested must be manually written. In
some cases, users can just select between two or more options and,
for this matter, we have other form control options.
Always evaluate what is the best solution. Consider on-screen space use of the components, how the developers will work with the information given, and how the user will navigate through the form.
Always evaluate what is the best solution. Consider on-screen space use of the components, how the developers will work with the information given, and how the user will navigate through the form.
Alternative and Related components
