Text input

Allow user to enter a single 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 to use Default text input?

Text input with Label

When to use Compact text input?

Text input without label.

Do / Don't

 

DO

DON'T

Use text input for text content.

Use text input for text content.

Use text input for numeric data.

Use text input for numeric data.

 

 

DO

DON'T

The text input must have a visible label.

The text input must have a visible label.

The text input don’t need to have a 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.

The error message should explain what the error is and how to correct it.

Don’t explain the error.

Don’t explain the error.

 

 

DO

DON'T

Display “optional” mention for all the optional field. Don’t add mention for required field.

Display “optional” mention for all the optional field. Don’t add mention for required field.

Display “required field” mention for all the field required.

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 are informationals and don’t have to block the course of the user.

Warning inputs 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 compact size if compact elements are present

Use default size if compact elements are present

Use default size if compact elements are present