Skip to main content

Text Input

A versatile and interactive element. Buttons allow users to perform actions and navigate through an application. They come in various styles and sizes, providing clear visual cues and feedback to users.

Key Features​

  • Clear button

    A Visually recognizable clear button, featuring an X icon, is placed within the text input field, allowing users to clear the entered text effortlessly.

  • Input validation states

    Features multiple visual states to provide users with instant feedback on their input status and any necessary corrections.

  • Affixes

    Provided Text or dropdown prefixes and suffixes to guide users to enter information in the correct format.

Variants​

The Text Input component is made up of three parts: Label, Field, and Helper Text. The Label tells users what to enter, the Field is where they type, and the Helper Text gives extra guidance.

You can choose to show or hide the Label and Helper Text to fit your design. This flexibility helps create an easy-to-use Text Input component.

Label Component

Helper text Component

textinput anatomy
    1. Label
    2. Field
    3. Helper Text
Before Components

Choose from five options - None, Icon, Avatar, Text Prefix, or Dropdown Prefix - to customize the content preceding the component, enriching the visual presentation and context.

After Components

Choose from five options - None, Icon, Avatar, Text Suffix, or Dropdown Suffix - to customize the content preceding the component, enriching the visual presentation and context.

States

Gives visual feedback and makes the user more aware of how to interact with the interface. That is why Text Input have several different states, depending on their state of use.

Filled States

Represent a completed or active element, offering clear visual feedback that signifies user interaction or selection within the interface.

Clear Button

A Visually recognizable clear button, featuring an "X" icon, is placed within the text input field, allowing users to clear the entered text effortlessly.

PropertyValuesDefault value
Filled
Yes / No
No
Clear Button
Yes / No
No
Before Component
None, Icon. Avatar, Text Prefix, Dropdown Prefix
None
After Component
None, Icon, Text Suffix, Dropdown Suffix, Icon Button, Button
None
State
Normal, Hover, Focus, Alert, Alert Focus, Disabled
Normal

Anatomy​

textinput anatomy
  1. Before Icon
    1. Before Icon
    2. Label
    3. Container
  2. After Icon
    1. After Icon
    2. Label
    3. Container
textinput anatomy
  1. Avatar
    1. Avatar
    2. Label
    3. Container
  2. Action
    1. Button or Icon Button
    2. Label
    3. Container
textinput anatomy
  1. Prefix
    1. Text Prefix
    2. Label
    3. Container
  2. Suffix
    1. Text Suffix
    2. Label
    3. Container
  1. Dropdown Prefix
    1. Dropdown Prefix
    2. Label
    3. Container
  2. Dropdown Suffix
    1. Dropdown Suffix
    2. Label
    3. Container

Behaviors​

Validation error

In the event of an error, the component transforms into an error state, displaying a Before Icon and Helper Text with Error Intent, guiding users towards resolution.

Best Practices​

Sensitive data input explained

If we ask for sensitive data and its need is unclear from the context, it is a good idea to explain to the user why we need it. 
Do

Placeholder text

Remember that the Input placeholder text will disappear when the user starts to fill in the field, so it is important not to include relevant or lengthy instructions for a user there. 
Do
Don't

Essential information

Always consider what information is actually needed from the user and ask only for what is really essential. Remember to mark the field for unnecessary information as “Optional”.

Don’t overcrowd

Display up to 7-8 text inputs simultaneously on the screen for desktop and 3-4 on mobile devices. Consider using a wizard or visual separators like dividers or headers to isolate the group of fields.

Content Guidelines​

Clear label

The label should be clear and concise. It needs to inform the user what is expected of them to enter. The best is to use noun form or action-oriented copy.
Do
Don't

Watch out labelling verbs

In most cases, it is clear what the user is supposed to do with the Text input component, so it is generally not necessary to use adjectives like "type, enter, add."
Do
Don't

Error message with a tip

The error message should drive the user to a clear path to fix the error. Do not only say what is wrong; show how to improve. Don't use an exclamation mark in an error message; this can arouse unnecessary bad emotions in the user. 
Do
Don't

Helper text when it actually helps

Do not overuse Helper texts. Use Helper text to give additional instruction, show the required format, or give an example. Do not add Helper text if Label is self-sufficient. 
Do
Don't