Overview

 

Design

Structure

• Forms with "stacked" fields are preferred, with the input sitting directly below the label—all left-aligned
• If the form is the primary or single piece of content within the page, right-align the actions at the bottom of the form, starting with the primary action first, and the secondary action following
• Try to eliminate the need of multiple actions at the bottom of the form, focusing the primary action around submission
• Avoid using a cancel button when outside of a modal or other interstitial, in these cases a back button will suffice

 

This example shows a text input as the form input, but the form input could be a radio button, checkbox, etc.

Form label

Input restrictions

Form input

Input help text

Input error text

Spacing

Single input

A standard, single input form field has 8px between each of it's parts.

Multiple inputs (in one form field)

If multiple inputs exist within one form field, then the spacing between those inputs is 16px.

Between form fields

Guidelines

• If all fields in a form are required, do not display an asterisk
• If all fields in a form are optional, do not display a label
• For “simple” forms with less than 4 inputs (ex: create template modal), the primary CTA button should be enabled if form is not complete. If a user attempts to save and is missing at least one required field, display an in-line error for the missing required fields
• For “complex” forms or multi-step forms [multiple form types & navigation*] (ex: campaign flow), the primary CTA button should be disabled if the form is not complete. There should be a contextual tooltip on the disabled primary action explained what actions the user needs to take to enable the button.

Optional or required fields

In most cases, a form requires most if not all of the inputs provided. Rather than marking each field with an asterisk, call out the fields that are optional by using the 'Optional' prompt within the Figma component properties for the label.

If a form field is comprised of mostly optional inputs, an asterisk may be appended to the end of the label.

• Usage is dependent on portion of fields that are either require or optional—and labeling the less frequent
• Context should be considered too, if a form is not a common process, denoting what is required is preferred.
• if required, it’s marked with a red-100 asterisk after the label
• if optional, it’s placed in parenthesis behind the label (use component props to do this)

 

Form submission behavior

• Prefer to keep the submit button enabled unless there are special permission circumstances that prevent submission.
• Note: Previously, we’ve disabled the submit button until the form is valid. Avoid this behavior to reduce the user’s cognitive load of having to troubleshoot why it’s disabled. Well written error messages can do a better job of explaining what’s wrong.
• While the form is submitting, the submit button should have a loading state (see Button loader for more details).
• Regardless of the alignment of the form actions, keep the primary button aligned to the outside edge, and the secondary action to its inside. Otherwise stated: if the form actions are left aligned, put the primary action first. If the form actions are right aligned, put the primary action last.

Do

Don't

 

 

Content

 

 

Accessibility

 

Health