When to Use
Forms come in two styles, each for a specific purpose, and they share most attributes except for spacing and sizing.
- Basic Forms have more “air” and are used throughout the app…
- when there is important information for the user to input, both optional and required.
- when the user needs to edit existing information/settings/etc.
- Transaction Forms are used specifically when creating invoices, expenses, payments, etc. and use a more compact layout.
Appearance & Behavior
- Use a trowser, a drawer, or a popover for basic forms, depending on the amount of content and whether the form will be accessed from multiple places in the app.
- Use a trowser with the flow navigation in the stage if the form is part of a flow longer than two steps.
Transaction Forms (invoices, expenses, payments, etc.) always exist within the Trowser and use a more compact layout.
Form layout and design elements
Design a form so it feels to the user like (s)he is having a brief, efficient, personal conversation with us, and group similar items together to help the user move quickly through the Form (examples: first name and last name, address fields, etc.).
Text labels are required for all input items to meet accessibility requirements. Use clear, concise, consistent labels to guide the user. If the subject is complicated, find words to make it simpler. Each label is left-justified and appears above the field it describes.
Required Indicators vs. Optional Indicators
Sometimes it’s important for a user to know if a field is required. Other times, it’s important for them to know something is optional. In a flow, call out what’s important for the user to know but don’t mix required and optional labels in the same flow. In most cases, this means calling out the minority, not the majority. In some cases, it isn’t necessary to call out either. For example, when signing up for a new product, it is self-explanatory that a username and password are required fields so no indicators are needed.
Both required indicators and optional indicators appear to the right of the field label. There is no need to include a legend. Required indicators: asterisk in Helvetica Neue Bold 14pt #404040. Optional indicators: italicized “optional” in Helvetica Neue Light 14pt #b8b8b8.
It’s also ideal to group required fields together and to bring them to the beginning of the flow.
Real-time field-level validation appears on an as-needed basis. Some examples are email validation and credit card format verification. Other validation happens once the Form or input items have been submitted.
When an error occurs, an error icon appears in front of the red field label. The outline of the field turns red and if there was a required indicator on the field, it turns red. More Form validation information can be found in the Errors pattern.
Ghost text (also known as the html placeholder attribute) is reserved only for situations where the user may need extra help understanding what to enter. When formatting is important for validation (such as in the case of a social security number or phone number), ghost text may be used to help guide the user. However, the field should automatically handle the addition of special characters as the user is typing so they can just focus on entering the proper digits. By having the field auto-format the content, the user can move through the form efficiently without needing extra guidance on the page. Ghost text should be placed inside the field, be italicized, and use hex #b8b8b8.
If it is important to hide data that has been entered in a particular field, an asterisk may be used to represent the masked character. For example, when viewing an account number in edit mode the field may show *********1234 so that only the last 4 digits are visible.
When formatting is important for validation, such as in the case of a social security number or phone number, the field should automatically handle the addition of special characters so the user can just focus on entering the proper digits.
For accessibility purposes, the order of the fields should read top-to-bottom, left-to-right. Labels are always above form fields, never to the left.
Users navigate from one component to the next using the Tab key. The tab index should follow the visual layout. The first item in the form is active/on focus by default.
Progressive Disclosure is a method of exposing information or form elements after the user has interacted with a control (e.g., clicking inside a text field or inputting data into a form). With Progressive Disclosure, corresponding information is displayed in-line.
Adding to a Form
When appropriate, users can add additional input fields or selection options to a form. This situation may occur when:
- the user is adding more information than commonly needed by the majority of users
- the user is adding a new selection item to the form
- information is intentionally de-prioritized and hidden to provide simplicity to the overall page
Adding More Input Fields/Rows
Users can easily add new fields or rows to an existing form through a button placed at the bottom of the last field or row. In a table rows can be deleted by clicking on the trash can icon.
On mobile phones and tablets ONLY, line style form fields are used. Form field labels sit on the line until the field is put in focus and/or completed. This applies to all types of form fields
- Forms are sentence case
- A black asterisk should be shown at the end of labels for required fields (un-shimmed features in QBO may still be showing red asterisks preceding labels for required fields). Do not include *Required as a footnote/legend on the page.
- Ghost text capitalization is sentence case
- Ghost text is italicized within the field. However, “optional” text may appear to the right of field labels when calling out optional fields instead of required fields.
- Although credit card, phone, account, and Social Security numbers should be partially masked with asterisks (i.e., except the last four digits), passwords are completely masked.
- Ghost text has no punctuation — Exceptions are phone numbers, social security numbers, etc.
- Use ghost or hint text to take the place of field labels or to give more information about filling out a field, such as required formatting and restrictions.