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.
- Field can accept a variety of types of characters.
- User must enter one of a specific set of phrases.
- Field requires a numeric value only.
- Text inside of the field must be aligned left.
- Labels must appear above the input.
- Labels must be written in sentence case.
- 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.
- 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.
- Should provide additional, non-critical information to assist in filling the field.
- Leave blank if not required.
- 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.
- Only ask for information that is really needed.
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.
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.
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.
Use when data inputs could be longer than one line.
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.
Use to allow users to clear content of the input field. Commonly used when clearing search fields.
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.