Input
#
OverviewInputs 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 fieldUse 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 fieldUse 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 fieldUse 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 autosizeUse when data inputs could be longer than one line.
#
Input with prefix or suffix#
Prefix#
SuffixUse 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 iconUse to allow users to clear content of the input field. Commonly used when clearing search fields.
#
Input with placeholderUse 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 iconUse when validating the input while the user is typing or real time validation.