Special content
Prefix text
Text input can contain prefix to add context and meaning. For example, this prefix can be an eveloppe icon for mail or localisation pin for address, ...
Actionable icons
Text input can contain icon(s) to add actions. For example, this eye icon displays/hides the password. There can be up to two actions on an input. When use actionable icons?
Informational message
An information message give details to help user to filling input. It can add context or give indications.
Those messages can be important for users.
- If the message give essential information to complete input, it has to be visible and place under the input like in the first illustration.
- If the message gives information or hints to help the user, it should be placed in a tooltip next to the text entry when is hovered over as in the second illustration.
Optional and required input
Text input, text area and number input can be:
- Optional, which means users have not to fill it to continue their progression. This information need to be visible and placed on the top right of the text input.
- Required, which means they have to fill it to continue to navigate. This information is not visible but if the users try to continue their progression, an error appears on the top right of the input with mention “required field”.
