---
tags: Build the future
---

> [name=Laureen Delhaye]DS OK

# Text fields
*Text fields let users enter and edit text.*

# Usage
## Field 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.

### Light and dark themes

When it come to use the inputs, there are two set of colors available: light & dark

The light version is the most used on Proximus products pages. The dark version is complementary to the light one and allows to differentiate sections, pages,...
Dark version is available for both purple and black interfaces to match darker themes such as pickx or epic

> [WARNING] Positive forms are only allowed to be used on pure white background, not on grey.

---

## Input states

### Basic state
State visible before click. Field and label are displayed. No user input yet.

### Hover state
State visible when pointer hovers the text field.

### Focused state
State triggered by keyboard navigation or click. Label comes above the field and is replaced by a placeholder in the container. Container is outline to help the user identify the field.

### Active state
State visible when the field is focused and filled. Container and input are visible.


### Filled state
State visible when the field is filled and unfocused. Container and input are visible.


### 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.


### Error state
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 error message should contain informations about the nature of the error, helping the user to fill the correct content.


### 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.


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


### 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.


---

## Anatomy


1. **Container**
Container improve legibility and discoverability of the text field in the interface environment by creating contrast in the surrounding content

2. **Label text**
Label text is used to inform user to what information is requested.

> [**INFO**] More info about the [label text](https://) below

3. **Placeholder**
Text dislayed after click in order to help the user fill in the right content.

4. **Input text**
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.).
>[name=WARNING]
> * Action icons are always in purple.
> * Action icons are 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 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.

> [IMAGE ANIMEE EN COURS]

---

## Label text
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**

---

## Specific cases

### 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.


> ### Pre-formatted field
> In some specific cases, the customer will be asked to give his ID card number, or credit card number for instance. The related fields must be structured to help him provide as easily as possible his infos.

### 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](https://) next to the field, at the right with 2px of spacing. This composition is based on the [gridding](https://) of the page.


All types of [button](https://) can be used

---

# Style

## Sizes


| | Attribute | Mobile | Tablet/Desktop |
| --------------------- | --------- | ----------------------------------- | ------------------------------------------------- |
| 1. Label before click | Font size | Size 4 |
| 2. Label after click | Font size | Size 3 || |
| 3. Container padding | Top <br>Right <br> Bottom <br> Left | | 1rem <br> 4.6rem icon included <br> 1rem<br>2 rem | |
| 4. Placeholder | Font size | Size 4 |
| 5. Container height | | ? | 4.6rem |
| 6. Rounded corner || 5px |
| 7. Margin bottom | | 2rem |
| 8. Margin bottom with helper text || 1rem |
| 9. Input text | Font size | Size 4 |
| 10. Helper text | Font size | Size 3 |
| 11. Margin helper text | Left | 2rem |

## Colors

### Light theme

| | Attribute | Basic value | Hover value |
| -------- | -------- | -------- | -------- |
| Basic state | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Hover state | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Focused state | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Active state | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Filled state | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Valid state | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Error | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Loading | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem
| Disabled | Label <br> Container <br> Placeholder <br> Border | Grey6 <br> Grey1 <br> Grey6 <br> No border | No hover
| Disabled pre-filled | Label <br> Container <br> Placeholder <br> Border | lorem <br> lorem <br> lorem <br> lorem | lorem <br> lorem <br> lorem <br> lorem