Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Used to enter spesific text input form



Text Fields allow users to enter and edit text content into a UI. They typically appear in forms.

anatomy guideline textfield
  1. Container : selection control (input) that can be selected or unselected, and pushed into different states.
  2. Label : indicates what you want the user to input in the text field.
  3. Input Container : interactive input area.
  4. Icon : Used to add a component to the start or the end of the input container.
anatomy guideline textfield
  1. Suffix and Prefix : this is an optional form of text field. To help user indicate the type of information that should be entered in the field such as currency, unit of measurement, etc.
  2. Caption : this is also optional form of text field. Provides contextual assistance like popovers, placeholder text, or helper text, in any area where the user might need additional information to provide the right input.
Alt text

Do : With label

Use fields of the same size in a form

Alt text

Don't : Without label

Don’t vary the sizes of fields in a form


Text field should be used when the requested input text is expected to fit within the width of the inline field. Otherwise, the input text will become hidden behind a vertical scroll which can create frustration

Common places textfield appear: Forms, Filter

When to use

  • When the expected input is short.
  • To gather basic information from users.
  • To specify what kind of data users can enter.

When not to use

  • You have multiple related fields.
  • You want longer responses from users.
  • You want users to upload a file.


A text field is a rectangular area in which people enter or edit small, specific pieces of text. When the Text Field text is too long for the available horizontal space, the text truncates when text is inputted. Avoid using the Text Field if you need to let users enter longer answers that might span multiple lines.

Alt text

Do : With supporting text

Use helper text to explain why an error occurred and how it's fixed

Alt text

Don't : Without supporting text

Let user see error indicator without displaying helper text


When creating Text Fields :

  • Validate fields when it makes sense.
  • Use a number formatter to help with numeric data.
  • Show a hint in a text field to help communicate its purpose.
  • Use secure text fields to hide private data. Always use a secure text field when your app asks for sensitive data, such as a password.
  • Use error and help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.
Alt text

Do : For short text input

Use text fields for gathering small amount of text of information

Alt text

Don't : For long text input

Use text fields to gather vast amount of text of information

Alt text

Do : With short label

Input labels and placeholder text should be in sentence case

Alt text

Don't : With long label

Input label text shouldn't be truncated or wrap over two or more lines