Textfield

Used to enter spesific text input form

Anatomy

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

Container : selection control (input) that can be selected or unselected, and pushed into different states.
Label : indicates what you want the user to input in the text field.
Input Container : interactive input area.
Icon : Used to add a component to the start or the end of the input container.

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

Do : With label

Use fields of the same size in a form

Don't : Without label

Don’t vary the sizes of fields in a form

Usage

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.

Accessibility

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.

Do : With supporting text

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

Don't : Without supporting text

Let user see error indicator without displaying helper text

Content

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.

Do : For short text input

Use text fields for gathering small amount of text of information

Don't : For long text input

Use text fields to gather vast amount of text of information

Do : With short label

Input labels and placeholder text should be in sentence case

Don't : With long label

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