Use the text field to allow users to enter textual or digital data.
- Input label: the input is the title of the Text Field (e.g.: ATA). It indicates what kind of information to type. It should be located fairly close to the text field in order to facilitate the user’s understanding.
- Placeholder: the placeholder provides an example of information to type (e.g.: ATA 33). It is particularly recommended to make things clearer and to help avoid typing errors.
- Additional field: the additional field is text that informs you about an error or success status. It may also be used in cases where the Placeholder requires further description.
- Help icon: the help icon allows you to provide more detailed information via a tooltip, particularly in cases where information must be found via specific treatment (e.g.: the cryptogram for a credit card).
- Mandatory field: the mandatory field informs the user that the Text Field must be filled out in order to validate the provided information.
- Choose the shortest and clearest label possible
- Keep 8px between the input and the text field in order to facilitate the association (the law of proximity)
- opt for a placeholder with a default value in situations where text entry needs to be made easier
- opt for a tooltip via the help icon or an additional field, if help is needed in finding the text to be entered
- Always signal a typing error via an error status and an additional field
- Concisely explain the reason for the error
- Adapt the text field to the expected value (size and format)
- Allow the user to copy and paste information
- When the expected value is lengthy, opt for the Text Area element, which adjusts itself to the size of text.
- Clearly indicate if there is a maximum number of characters
The Text Field is mainly used for forms, but also for filtering panels, modals or for searching. You may find the rules for managing groups of Text Fields in the following sections.
The increment input is used to make entering numbers into a text field easier. It is generally used when a few clicks permit the user to quickly select the desired value. This manipulation simplifies typing (especially on mobile devices). The increase and decrease ranges (+1/-1, +10/-10, etc.) may be predefined. A default value may also be defined.
Increment input are usually found in forms or in filter panels.