Text input

Text input allow user to enter a single text in a form and text area to add a long text in a form. They are mainly use for polls or gather information.

When to use : Text input?

Text input are used to allow user to enter a single information in a form. This component is mainly use inside formula or login modal that require the user to enter munltiple single information.

When user need to enter a single information

- For searching information See search bar
- To add more than a single information.

When to use Default text input?

Text input with Label

When you don't have context or specific information about what enter in the text input.

When to use text input without label?

When the context of text input is already define by texts or components around him.

When to use transparent text input?

When it is placed in a narrow place where the hierarchy has been already established.

Do / Don't

DO	DON'T
Use text input for text content.	Use text input for numeric data.

DO	DON'T
The text input must have a visible label.	The text input don’t need to have a label.

DO	DON'T
The error message should explain what the error is and how to correct it.	Don’t explain the error.

DO	DON'T
Display “optional” mention for all the optional field. Don’t add mention for required field.	Display “required field” mention for all the field required.

DO	DON'T
Warning inputs are informationals and don’t have to block the course of the user.	Warning inputs block the course of the user.

DO	DON’T
Use compact size if compact elements are present	Use default size if compact elements are present

DO	DON’T
Use the transparent variant in complex areas where a hierarchy has already been established.	Don’t use transparent variants in forms.