Input overview
v3.1.0
Form fields allow users to enter and edit values to submit.
Form fields allow users to enter and edit values to submit.
Expanded component guidance coming soon.
This page will be updated soon with expanded guidance and clarity from Design, Platform, and Accessibility teams.
Labels are required for all form fields and are either stacked or floating. Stacked labels are above the text box and floating labels are inside the text box. A floating label animates upward on focus to make room for the input value.
A lead icon or trailing icon can signify acceptable entry types or behavior, like currency, date entry.
Use an asterisk to indicate a field is required. Display the word “optional” in parentheses next to the field label is the field isn’t required.
If most fields are required, only indicate the optional fields. If most fields are optional, only indicate the required fields.
Placeholder text, or “ghost text”, is visible until a character is entered or a value is selected.
Because the placeholder text disappears, putting instructions or requirements as placeholder text is not accessible. Helper text is the preferred method to convey this information.
Helper text is placed below the field and informs the user of any requirements or disclaimers. Helper text can be shown persistently or on focus.
When a field fails validation, the helper text produces an error message to help the user successfully fulfill the input requirements. Error messages are concise and direct, and replace any previously visible helper text. An error icon is prepended to the helper text to enhance discoverability.
A character counter will appear when there is a limit on the number of characters that can be submitted. The counter updates in real-time as the input is adjusted.
There are two sizes available: 48px and 40px. These match our button sizes to account for situations where they are inline together. Avoid mixing different sizes in a single form.
Users cannot focus on or change read-only fields. Their input is derived from other parts of the UI and is intended to be viewable for reference. The input is submitted with the form.
Users cannot focus on or change disabled fields. Their availability depends on certain requirements. No value will be submitted from disabled fields.
Static text or symbols can be prepended to the input. The prefix clarifies the expected input and removes the need for users to manually enter them. These are useful for values like currency.
Static text or symbols can be appended to the input. The suffix clarifies the expected input and removes the need for users to manually enter them. These are useful for entering values like dimensions and weight.
Input formatting clarifies expectations and formats the input to be easier to read. Slashes, dashes, and spaces are automatically added to the input as the user enters characters.
Single-line fields and text area fields handle overflowing content similarly. For single-line fields, the input overflows left or right. Text area fields overflow top and bottom. The overflowing input is masked in both. While focused, the content will shift to keep the cursor in view as the user enters characters. When the field loses focus, the content will scroll to the beginning. Focusing on the field again returns the user to the end of the content.
Type-ahead and autocomplete help accelerate user input by reducing keystrokes. Suggestions appear in a popover menu on large screens or below the field in a full-screen modal on small screens.
Use asterisks to conceal all characters.
Password entry uses large bullets. Users can disable privacy by activing the show/conceal toggle icon to the right.
Use a lowercase x to conceal part of an entry.
Use “Ending in...” when concealing saved credit card and bank account numbers. This is only used in settings, not inside a field itself.
Email address privacy is a common exception to these rules. Use asterisks to conceal characters between the first and last characters of the address before the @ symbol.
Focusing on a field applies a custom focus indicator. All fields have the same focus indicator applied.
The default text field is a single line field.
Dropdown fields allow for selection of a value within a predetermined data. Large screens open a menu container on focus. Compact screens open a bottom container or a fullscreen modal, depending on the number of options.
Text areas are useful when the input is expected to extend multiple lines. Comments, notes, and messages are examples where a text area is appropriate. Browsers natively add the ability to resize text area fields if the user would like more or less visible. The default height fits 5 lines of text.
The password field automatically hides its input. It includes a trailing icon that toggles the entry masking.
Phone number fields include a dropdown to select a country, a matching country code, and masked input to improve readability.
Form fields span the full width of the screen on compact screens.
