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.

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.

Variants

Single line

Example of the single line text input variant.

Multi line

Example of the multi line text input variant.

Textarea

Example of the textarea text input variant.

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.

Label

Labels can be removed in certain use cases, but it is advised against due to accessibility reasons. In instances where it needs to be removed, it is recommended that a ‘hidden label’ is embedded into the code for screen readers to announce.

Text input with label 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.

Layout

Inputs can be placed side by side, if they are required under the umbrella of one label.

Example of text inputs placed side by side.

Overflow

Single line

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

Example of single line text input overflow.

Multi line

Multi line text input automatically resizes based on the amount of content the user inputs. A max height of the text input is defined per user case.

Example of multi line text input overflow.

Textarea

Textarea text input automatically resizes based on the amount of content the user inputs. A max height of the text input is defined per user case.

Example of textarea text input overflow.

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.

Clear icon

For Android, a clear icon automatically appears as soon as a singular character is entered by the users, allowing the them to remove their input.

Example of clear icon behaviour.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Default interactive state example.

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.

Error - focus

Interactive state example showing an error when input is focused.

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.
Back to top