Forms

• Overview
• Building a form
• Behavior
• Designing a form
• Variants
• Accessibility
• Related
• References
• Feedback

Overview

When to use

• Sign up for / log into an account
• Register for a service
• Reconfigure settings, (e.g. enabling notifications)
• Take a survey
• Purchase a product
• Provide feedback

Respect the user

• Respect the user’s GDPR and other privacy regulations by only asking for information that is absolutely necessary.
• Group related tasks under section titles to provide more context and make the interface easier to scan.
• Follow a logical, predictable order—e.g first name first, last name second.
• Allow users to stay with a single interaction method for as long as possible (i.e. do not make users shift from keyboard to mouse numerous times in a single form).
• When designing be mindful of password managers and browser capabilities that populate data for users.
• Progressively disclose additional inputs only as they become relevant; see the Designing for longer forms section below.

Anatomy of a form

1. Labels: Input labels helps users understand what the corresponding inputs mean.
2. Text inputs: Enable users to input free-form text.
3. Data inputs: Information can be entered through a variety of non-free form input fields as well, (e.g. checkboxes, radio buttons, dropdowns and selects, file uploader, date pickers, toggles, etc.) Visit the individual component pages for in depth details of their specific states and visuals.
4. Help: Provides in-context guidance like tooltips, placeholder text, or helper text, to assist the user in providing the right information.
5. Buttons: Allows users to submit or exit a form.

Building a form

Labels

• Use sentence-style capitalization for all text elements, except for product names and proper nouns. Sentence-style means only the first word of each sentence is capitalized.
• Although they may be formatted differently, all input components need labels.
• Labels should clearly state the required input.
• Do not use colons after label names.
• Labels are not helper text; be succinct. Use one to three words only.

Top-aligned labels

• Top-alignment enables quick completion.
• The label length has room to extend or vary, (e.g. other languages).
• When users are entering familiar content and are less likely to make data entry errors, top-alignment is ideal.
• This arrangement is best when fewer form fields need to be presented.

Optional vs. mandatory

1. Simple forms - generally shorter and/or user- or consumer-oriented; such as sign-up and contact forms and checkout screens. Most of the fields will tend to be required.
2. Complex forms - generally longer and product-oriented; contain properties and settings that are used to configure Enterprise software.  Although they will usually contain at least one required field, the majority of the fields will tend to be optional.

• If the majority of the fields are required, mark only the optional field labels with (optional).
• If the majority of the fields are optional, mark only the required field labels with (required).

Example of a short user sign-up form using the optional pattern

Example of product configuration properties using the required pattern

When to use

DO mark fields (required) when the majority of the fields are optional.

DON'T mark fields (optional) when the majority of the fields are optional.

Best practices

• Consider the overall number of required and optional fields in the forms for your entire product. The pattern used should be consistent throughout your product, or at minimum consistent between all of the same type of form within your product.
  • For example, if you have 100 types of connections properties forms and the fields are optional in 85 of the 100 forms, all 100 should use the required pattern.
• Use the techniques illustrated below in the Default Values and Designing for Longer Forms sections in order to make your forms easier and more efficient to use.

Text inputs

Best practices

• The field widths should reflect the intended length of the content while still aligning to the responsive column or mini unit grid.
• Make sure users can enter their information at smaller screen sizes.
• Truncate when an input is too long to be fully displayed in the field.