Inputs allow users to type alphanumeric and numerical data into a field. Inputs are used for creating and editing content. See Formsfor creating and editing patterns.

Global patterns.

Design Guidelines#

Use when#

  • Field can accept a variety of types of characters.

Don't use when#

  • User must enter one of a specific set of phrases.
  • Field requires a numeric value only.

Visual Style#

  • Text inside of the field must be aligned left.
  • Labels must appear above the input.
  • Labels must be written in sentence case.

Label text#

  • Always use the label to provide information critical to using the input field.
  • Never use the label to provide help text or non-critical information. Instead, use the placeholder or inline help text.

Placeholder text#

  • Use only when required to understand the format of an entry (eg. phone number or date format).
  • Leave blank if not required (eg. email format).
  • Should not provide critical information. Content is hidden once the field is filled.

Help text#

  • Should provide additional, non-critical information to assist in filling the field.
  • Leave blank if not required.



  • Only ask for information that is really needed.


Default input field#

Use for short one line data inputs. Most common input in the UI. When user's need to enter longer data, use the text area with autosize component.

Disabled input field#

Use when an input field is not available for interaction. Most common use cases are:

  • When data is only required in a particular state. For example, the user must click a checkbox or radio to accept the terms of service before they can enter more data.
  • When previously entered data is no longer editable. For example, a client key input field in the Dev Console.

Read-only input field#

Use to allow users to copy text from a disabled input field such as for a client secret field. Read-only input fields are not editable but unlike disabled input fields, users are allowed to highlight and copy input text.

Text area with autosize#

Use when data inputs could be longer than one line.

Input with prefix or suffix#


Use to provide simple contextual help in line.

  • Use prefix for things such as search icon.
  • Use a suffix for things such as the eye icon to reveal passwords.

Input with clear icon#

Use to allow users to clear content of the input field. Commonly used when clearing search fields.

Input with placeholder#

Use to provide a concise, non-essential hint about the input data required. Commonly used when the input label doesn't specify the expected data needed for an input. For example, providing a placeholder for a postal code input.

Input with help text#

Input with inline error#

Input with loading icon#

Use when validating the input while the user is typing or real time validation.

Related components#

Last updated on by Chris Spaidal