---
tags: Kickoff top10 DONE
---

# Text fields
Text inputs allow users to enter any combination of letters, numbers, or symbols.

# Usage

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

## Input states

1. **Basic state**
State visible before click/tap. Both label and container are visible. A placeholder is displayed when user need more context to give us input.

2. **Focused state**
State visible when the input is clicked/taped. Label and container are both visible even if the border of the container changes colour to signify focus.

3. **Hover**
State visible when pointer hovers the text field. No visual change compared to the focused state.

4. **Error message**
When text input isn’t valid, an error message can display instructions on how to fix it. Error messages are displayed below the input line.

5. **Success message**
When text input is valid. Success messages are displayed below the input line.

5. **Disabled**
State visible if the field is not clickable. The container is displayed but they are greyed out in order to signify the change of state.

## Anatomy


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

2. **Placeholder / Input text**
Input text lives inside the container takes over the place of the placeholder as soon as the users type in some text.

3. **Label**
Label text is used to inform user to what information is requested. Keep it short, clear, and fully visible. Label text shouldn’t take up multiple lines.

4. **Tooltip**
Tooltip offer an extra space for complementary informations. If informing the user takes more than a few words to make it understandable, using the tooltip is a good solution to spare some visual space on the page.

6. **Helper text** _(optional)_
Helper text gives additional guidance about the input field, such as how it will be used. It should only take up a single line.

## Specific cases
### New password field

1. **Input visualisation**
By default, each caracter of the password is hidden with a dot for usability & security reasons. When clicking/taping on the *eye* icon, the password is revealed.

2. **Mandatory elements tooltip**
When active, password type input displays a tooltip containing all the requirements. Displayed as a list with validated state indicator, each element is a mandatory item that should be entered in the field.

# Style

## Sizes
> [name=katsele] Est-ce que dans typo, on ne mettrait pas un référent de tailles? Plutôt que de mettre `rs-txt-s4` qui est spécifique et propre à la lib. Mais avoir notre échelle? genre `pxs-font-4` ? Qu'en pensez-vous?

| | Size |
| -------- | -------- |
|1. Input label font size|rs-txt-s4|
|2. Tooltip|rs-txt-s4|
|3. Input border|1px|
|4. Container padding|1rem|
|5. Placeholder / Input text font size|rs-txt-s4|
|6. Container height|3.9rem|
|7. Container margin bottom|1rem|
|8. Helper text font size|rs-txt-s3|

## Colors

||Background|Border|Font|
| ------- | ------- | ------- | ------- |