Input
Overview#
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.
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.
Behaviour#
- When possible validate the input while the user is typing or real time validation.
- Always use input with loading icon when validating in real time.
Editorial#
- Only ask for information that is really needed.
Examples#
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#
Prefix#
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.