Form

Form components can use as much vertical space as necessary, although overly long forms can cause frustration for the user and affect completion. Vertical spacing is expressed between form components through row padding and section padding. Row padding is the natural space between components, similar to a line wrap. Section padding is a larger space applied between sections of grouped components, such as address text inputs in a shipping section. Section padding is 150% of the row padding.

Horizontal spacing is relative to breakpoint ranges (see the Grid foundations page for more information). Note that XS-sized forms should stack components in a single column. Form components may only be positioned in the same row in S-sized forms or larger. Align form layouts to column width, with gutter spacing used between form components.

Because form length affects cognitive load, the recommended display style changes as the fields increase.

The submission button is the final section used to complete the form and send information. Primary buttons should be used for submission. If there are multiple buttons, such as an option to save for later or navigate back, the non-submission buttons should be secondary. In a horizontal layout, the primary button should be on the left. In a stacked layout, the primary button should be on top. See Button component guidance for more information.

The recommended method for required fields is to include a red asterisk (Red 700) next to the field label. This should be paired with an explanation in the form’s introduction text that all fields marked with an asterisk are required. Alternatively, required fields can display “(required)” next to the field label instead of asterisks. Note that this alternate method increases text length, thereby making it harder for users to skim the form.

Fields that are not required should display “(optional)” next to their field label. Forms should be limited to fields that are necessary for the action being triggered, as lengthy forms can create a heavy cognitive load and reduce submission rates. Consider if an optional field needs to be added to a form.

If a form submission is not successful, users should be immediately alerted to the problem or error in the form of a message bar or modal. While long forms are to be avoided whenever possible, message bars on long forms should include an anchor link to the error field to aid in quick comprehension. Common user errors include empty fields, invalid inputs, and inputs that exceed the character count.

If the error is caused by the user’s actions, there must also be an inline message consisting of a field-level error text and an icon. To aid screen reader and assisted device users, the error text must be adjacent to the error and clearly describe how to fix it. The error text, icon, and input must change color (Red 700). However, to be accessible for all users, color cannot be the sole indicator of an error.

E-commerce experiences present consumers with products and encourage them to make a purchase. Forms are used to collect information necessary to complete a purchase, such as providing a street address and phone number for shipping, or a credit card number for billing purposes. Every additional step a user is required to fill out adds friction to the experience, so consider what information is strictly necessary and what can be collected at another time.

Settings allow users to configure the appearance or actions in an application to better suit their needs. Forms are used to gather and apply information related to accounts, users, and notification preferences.

Forms can be used for streamlining support communication, such as collecting requirements for a ticket or gathering feedback, and change requests.

Productivity applications help users complete complex tasks they would have otherwise done manually. For instance, a user building an order status report in a dashboard or analytics product could use a form to define the scope and parameters of the customer orders in the report. Forms may also be used to save time in workflows, like hiring, by grouping similar information into sections or separate pages. This might include applicant name and email address under “Personal information” and a list of previous jobs under “Work history”. By communicating the number of steps or pages in the workflow and the ability to stop and save progress, users can complete longer forms even in the case of interruption or a heavy cognitive load.