What is a text field component?

Text fields allow users to enter text into a UI.

1. It might come with description labels, helper text, placeholder text, and inline validation - depending on what data it's collecting.
2. It is a versatile way to collect a wide range of data types - it's commonly used for collecting: Email addresses, Password, Credit card numbers, Phone numbers, Verification codes, and more.

The text field UI design pattern is commonly found in: Data entry, Forms & surveys, Chat & messaging, Note-taking & writing.

What is the anatomy of a text field?

What are the design variants of a text field?

We studied over 17,000+ text field UI components on Mobbin, from real-world examples and found the following variants.

1. Text fields may have different container types

The most standard text field containers we've seen are filled text field.

Alternatively, it is also common to see text fields with outlined containers.

Finally, text fields that are outlined on the bottom edge only.

2. Text fields may have helper text, placeholder text, and description text

It is common for text fields to have both a description label text (i.e: "Name", "Email", "Password") and a placeholder text (i.e: "Your name", "Your email", "Minimum 8 characters").

These supporting labels are important in helping guide the users to the desired input.

Another important form of supporting label text is the helper text - these are also sometimes known as error text, hint text, or inline validation text.

The helper text shows up as an error message when users are typing into the input fields. The error message is often shown in red, with a leading icon. This helps guide users to enter the proper desired input, especially in important fields like card numbers, or email addresses.

3. Trailing icon or buttons in text fields

Some text fields may come with trailing icon or buttons, depending on the type of data required for a specific field.

1. Password fields often come with a trailing eye icon, which allow users to hide/show their password.

2. Credit card fields sometimes come with a camera icon, which allows users to scan and autofill their credit card number.

4. Numeric only text fields

Some text fields only accept numeric inputs, and rejects or throws an error message for any input that is not numeric in nature.

Some examples include verification code fields, phone number fields, money transfer fields.

5. Grouped text fields

Grouped text fields are most commonly found in sign up pages - where the first name and last name are grouped together; or the email and password fields are grouped together.

By grouping relevant text fields together, it makes it clear to users that the input field is related to each other.

6. Text area is a variant of text fields suitable for longer inputs

A text area is a design variant that is catered for longer responses - like journal entries, descriptions, or articles.

They are usually longer in height as compared to a typically text field, which has a fixed container height.

When to use a text field?

1. Data entry

Text fields are typically used to allow users to enter and edit text-based information, such as usernames, passwords, or any other textual input required by the app.

2. Forms & survey

Text fields are often utilized in forms and surveys where users need to provide detailed information, such as addresses, contact details, feedback, or responses to specific questions.

3. Chat & messaging

Text fields are essential components in chat and messaging apps, enabling users to compose and send text messages to communicate with others.

4. Note-taking & writing

Text fields are used in note-taking and writing apps, providing a space for users to jot down their thoughts, create to-do lists, or write longer-form content.

Conflicting UI elements: Search Bar

Text fields v.s. Search bars

Visually, a text field might be confused with a search bar as they both have placeholder text and containers. In fact, a search bar is a special type of text field - sometimes known as a 'search field'.

You can easily differentiate them as search bars have magnifying glass icons (and usually has 'search' in the placeholder text field)

A search bar is used to quickly search for specific information within a larger set of data. It is often used to search for specific keywords or phrases within a website or database. A text field is simply used to enter data or information into a form or document.