Text Input

A text input is an interactive element that allows users to enter and edit text within a user interface.

Overview

The purpose of text inputs is to gather user input in the form of text, enabling them to provide specific information, such as names, addresses, messages or any other textual data required by the application or website.

Text inputs are fundamental elements used in forms, login screens and any user interface where users need to provide textual information.

Two text inputs that are vertically stacked together.

Dos and Don’ts

Use it when you want the user to enter a single-line value.

Don't

Don’t use if it is likely that the input will exceed one line, if this is the case use a textarea instead.

Anatomy

Form label (optional): The form label provides necessary content / information to a form.
String: Placeholder or user inputted value.
Leading content (optional): An icon, text, or symbol that is used to visually support the input. It is displayed before the input’s value.
Trailing content (optional): An icon, text, or symbol that is used to visually support the input. It is displayed after the input's value.
Assistive text (optional): The assistive text provides additional instructional information / error / success messaging.

Modifiers

Leading and trailing content

An icon, text, or symbol can be added to visually support the input. Leading and trailing content can be combined depending on the use-case.

Icon

Use a leading icon for non-interactive icons that visually support the text input.

Use a trailing icon for interactive icons within the text input.

Use both leading and trailing icons when non-interactive and interactive icons are required.

Text input with both leading and trailing icons.

Alphanumeric

Use when text input requires clarification of the input format, such as a symbol or unit of measure.

Text input with alphanumeric content and both leading and trailing icons.

Payment method

Payment method is only available in trailing content. Use when a text input requires a card number to be entered, and reflect the card entered by the user.

Type

Placeholder

Placeholder text should not contain crucial information, and only displayed if beneficial to the user.

Filled

Placeholder text disappears as soon as the user starts entering data into the text input field.

Sizes

Height

Use a consistent text input height when it is being used alongside other form components on the same page.

Small

Use when there isn’t enough vertical space for the default text input size.

Medium

Default size and should be used whenever possible.

Large

Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a text input is placed by itself on a page.

Width

Use the field width to set the users’ expectations, this can help us communicate how much input is required. For example, if a field should only have 5 characters, a full width field would not be suitable. In forms, aim to standardise widths for text inputs to enhance readability for users.

Content

Placeholder

Use clear placeholder text for the text input trigger so that users understand the purpose.

Input types

Alphanumeric

Both letters, numbers and certain special characters are allowed, for the majority of use-cases this will be used.

Numeric

Only numeric values can be entered, for use-cases such as zip code, phone number, card number.

Password

Characters are replaced with dots that hide the password text by default.

Formatting

Date

A date format can be applied to date entries such as DOB, expiry date, start/end date - a slash is automatically displayed when the user enters a value that fits a date format. The user can only enter numeric values in a date text input. We support several types of numeric date formats in engineering. The position of the date, month and year can be interchangeable.

Card number

Specifically for card number entry, the card number is displayed in groups of 4 digits. A space appears automatically after the user has entered 4 digits. The user can enter a maximum of 19 digits.

Overflow

If the string exceeds its available visible bound, the content overflows to the left.

Text input content overflows to the left.

Behavior

Assistive text

If space is limited, long assistive text may wrap to multiple lines, especially if there are multiple text inputs sitting side by side. Every text input should have its own assistive text, even if the content is identical.

Payment method

When using the payment method, the specific card icon will appear as soon as the system detects the type of card entered by the user.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Hover

Focus

Disabled

Read only

Error

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of text inputs in a left-to-right context:

Default example layout with left-to-right text direction.

Password input example with left-to-right text direction.

Date selection example with left-to-right text direction.

Phone number input example with left-to-right text direction.

RTL examples

Here are some examples of text inputs in a right-to-left context:

Default example layout with right-to-left text alignment.

Password input example with right-to-left text alignment.

Date selection example with right-to-left text alignment.

Phone number input example with right-to-left text alignment.

Resources

Figma Component	Stable
Figma Documentation	Stable
Web Components	Beta
Vue [Fozzie]	Stable
React [Snacks]	Stable
iOS JustUI [UI Kit]	Stable
iOS PIE [SwiftUI]	Stable
Android PIE [Compose & Views]	Alpha