Input fields
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.
Best practices
- 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
Placement
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.
- Form
- Modal
- Filter
- Search
Increment inputs
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.
Best Practices
- An increment input always displays numerical values.
- The number of units added by the increase button must always be similar to the number of units subtracted by the decrease button.
- Always authorize manual data entry of values.
- The title of the field must be clear and concise.
Placement
Increment input are usually found in forms or in filter panels.
Visual
Input fields
Appearance
The text field has an input field for entering values (textual or digital), which may be adapted in length according to the size of the expected value (e.g.: a name, an address, an MSN account, etc.). The Text Field also has defined areas for input and additional/informative text.
Behavior
Various conditions of Text Fields exist, according to the user’s interaction: Placeholder, Focus, Filled, Error, Success, Disabled.
Variations
An icon may be added to the Text Field in order to provide the user with more information.
Text Area
The height of the Text Field may also be adjusted, in situations where a larger amount of information is entered (e.g.: a comment). An additional field also provides guidance to the user (e.g.: a limited number of characters).
Increment inputs
Appearance
An increment input is a text field including spinners for increasing or decreasing numbers with icon buttons.
Behavior
Its states are similar to the text field: active, hover, focus, and inactive. The buttons also have two states: normal and hover. A placeholder may be used to facilitate understanding of the element.
