Skip to main content

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

Do
  • 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

Anatomy of a text input.
  1. Form label (optional): The form label provides necessary content / information to a form.
  2. String: Placeholder or user inputted value.
  3. Leading content (optional): An icon, text, or symbol that is used to visually support the input. It is displayed before the input’s value.
  4. Trailing content (optional): An icon, text, or symbol that is used to visually support the input. It is displayed after the input's value.
  5. 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.

Text input with a leading icon.

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

Text input with a trailing icon.

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. It is recommended to use less than 4 characters in leading or trailing content.

Text input with alphanumeric content and a leading icon.
Text input with alphanumeric content and a trailing icon.
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.

Text input with payment method modifier.

Type

Placeholder

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

Text input with placeholder type modifier.

Filled

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

Text input with filled type modifier.

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.

Text input with small height.

Medium

Default size and should be used whenever possible.

Text input with medium height.

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.

Text input with large height.

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.

Text input with default width.
Text input with small width.

Content

Placeholder

Placeholder text is optional, it should not contain important information, and should only be displayed if it is useful to the user.

  • Use clear placeholder text for the text input trigger so that users understand its purpose, e.g. example of the input data.
  • Placeholder text should not be used as a label
  • For additional information or instruction, use assistive text instead.
Do
Example of a properly used placeholder: 'MM/YY' for an expiry date field.
Don't
Example of an incorrectly used placeholder: 'Username' and 'Must contain 8 characters' as labels for input fields

Input types

Alphanumeric

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

Text input with alphanumeric content.

Numeric

Only numeric values can be entered, for use-cases such as zip code, phone number, card number. However, some browsers accept dots, commas and the letter 'e' in numeric input.

Text input with numeric content.

Password

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

Text input with password content.

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.

Text input with date formatting.

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.

Text input with date formatting.

Overflow

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

Text input content overflows to the right.
Text input content overflows to the left.

Behaviour

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.

Example of assistive text behaviour.

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.

Example of payment method behaviour.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Default interactive state example.

Hover

Interactive state example when input is hovered over.

Focus

Interactive state example when input is focused.

Disabled

Interactive state example when input is disabled.

Read only

Interactive state example in read only mode.

Error

Interactive state example showing an error.

Examples

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