Text fields

Types

There are instances, sometimes in the same form, where you need users to enter both short and long form content. Allow the size of the text input box to reflect the length of the content you expect the user to enter.

1. Text field
   When the expected user input is a single line of text, as opposed to a paragraph.
2. Text area
   When the expected user input is more than one sentence.

States

1. Default state
   State visible before click. Field and label are displayed. No user input yet.

2. Hover/Focused state
   State visible when the cursor hovers the field and triggered by keyboard navigation or click.

3. Active state
   State visible when the field is focused and unfilled.

4. Active + Filled state
   State visible when the field is focused and filled.

5. Filled state
   State visible when the field is filled and unfocused.

6. Disabled state
   State visible if no interactions are allowed for this field.

7. Read Only / Disabled pre-filled state
   State visible when the input is pre-filled and can't be change. Container is visible with a disabled label and the user input is displayed like in the filled state.

8. Prefilled state
   State visible when the field is prefilled.

9. Loading state
   Between an active state and a valid/error state. Field and user input are visible, animated dots and a waiting message are displayed to inform the user why he is waiting. This state should be used when the field needs to live check the content but the check takes more time than an immediate response.

10. Valid state
    When given input is correct or validated. Field and user input are visible, a green mark is displayed. An optional confirmation text can be displayed underneath the input (helper text).

11. Error message
    When given input is not correct. Field and user input are visible, a red mark and an error message are displayed to give context to the user. The helper text is mandatory. This error message should contain informations about the nature of the error, helping the user to fill the correct content.

Anatomy

1. Container
   Container improves legibility and discoverability of the text field in the interface environment by creating contrast in the surrounding content
2. Label
   Label text is used to inform user to what information is requested.
3. Placeholder
   Text dislayed after click in order to help the user fill in the right content.
4. User input
   Input text lives inside the container takes over the place of the placeholder as soon as the users type in some text.
5. Action icon (optional)
   Icon displayed to interact with the content of the field (e.g. delete, search, access dropdown or filters, etc.). Action icons are always in purple and clickable.
6. Indicator icon (optional)
   Activation icons inform the user on the status of the input. Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts, which are useful when you need to design for colorblind users.
7. Helper text (optional)
   Helper text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus.

Label text

Label text content

Label text is used to inform user to what information is requested. Every text field should have a label. Label text should always be visible.

Do

Don't

Don't

Label text interaction

When inactive the label should stay inside the input to spare as much as possible some visual space.

As soon as it becomes active, the label should slide up on top of the field. The label is aligned to the left of the field to keep the user informed, also to leave some room for the placeholder and for the content of the input.

Password

A password field answers to all the rules mentionned before and requires two specificities:

• Every single character provided by the user should be hidden
• The password itself can be unmasked by clicking on the "eye" action icon

Input field with a button

Depending of your needs, you can combine a input field with a button. In this case, you have to add a standard button next to the field, at the right with 2px of spacing. This composition is based on the gridding of the page.

Only the primary and order types of button can be used

Preformatted text fields

When having a long chain of digits (e.g. national security number, card number, phone number). Make use of a text field with preformatted content. It improve readability of the field.

Do

Don't