patterns / null

Forms

Design Spec

Form Anatomy

Forms are made up of many possible components, including many represented below.

form_anatomy.png
1. Label
2. Inline Help
3. Overlay Help
4. Placeholder
5. Character Counter
6. Form Actions

Spacing

Spacing between form element is 24px, or $spacing-3 on our token scale. This is true for both horizontal and vertical scrolling. Certain elements, such as a group of radios or checkboxes, are a more compact 16px ($spacing-2). Spacing within elements of form elements are typically 8px, or $spacing-1 on our token scale.

form_spacing_1.png
form_spacing_2.png

Grouping

Spacing between the form element group is 48px, or $spacing-5.

form_grouping_1.png
form_grouping_2.png

Divider

Dividers can be used to group out form elements, particularly when there is no subheader copy needed. This would use the divider component to accomplish this.

form_divider_1.png
form_divider_2.png

Dividers + Sub Headers

Subheaders and dividers can be combined on denser UI pages where separation is important to reinforce, while also needing the subheader copy.

form_dividers_sub_headers_1.png
form_dividers_sub_headers_2.png

Columns

form_columns_1.png
As a rule, form elements should be limited to 1 column. Multi-column layouts can be used when there is sufficient space on the screen for it, and the elements are logically related to each other.
form_columns_2.png
form_columns_3.png

Forms in Layouts

In a Drawer

As a rule, form element width should conform to the size of the Drawer’s set width.

form_in_drawer.png

In a Modal

As a rule, form element width should conform to the size of the Modal’s set width.

form_in_modal.png

In a Flow Card

As a rule, form element widths in Flow Cards are set to a logical width to the form element, rather than the size of the Flow Card.

form_in_flow_card.png

On a settings page

Refer to the Settings Templates and Examples for more specific examples of Form usage in this layout.

form_in_settings.png

Usage Guidelines

Labels and Help

What help elements should we use?

Labels should almost always be used

Most contexts for forms require a label. Some exceptions include when an icon can clearly explain the use case, such as a search input, or if a label exists elsewhere, such as a table column.

form_label_use_do.png
form_label_use_dont.png

Use inline help for essential and supplementary information

Inline help is strong at providing additional information necessary to complete a form.

form_inline_password.png
form_inline_learn_more.png

Use overlay help for supplementary information

Overlay help can de-clutter a page by putting less important, supplemental information behind an overlay element.

form_overlay_supplementary_1.png
form_overlay_supplementary_2.png

Inline help is preferred over overlay help

Inline help always being visible on the page improves the usability of the content itself. Overlay help can still be used however, particularly when the content density of the page is high.

With overlay help, use the ? icon over the i icon

The information icon (i) is harder to read on low pixel-density monitors.

form_use_q_over_i.png

With overlay help, the ? icon is preferred to dashed underline

Using the dashed line can create usability issues. This style should only be used in heavy form pages where most form elements offer supplemental help.

form_use_q_over_dots.png

Placeholder text should generally be avoided

In general, placeholders should be omitted, as they have many downsides:

  • Users lose the help content on typing, and after the element is filled out.
  • Higher contrast text can confuse a user into believing the placeholder is a real value.
  • They have inconsistent implementations in browsers.

form_placeholder_search.png

Input fields such as search, when paired with the icon, can be sufficient.

form_placeholder_avoid.png

Reassure the user as they take action

Form help reminds and validates the user’s actions. It’s especially valuable when used with features that aren’t used often, have high stakes, or rely on a certain level of expertise and area knowledge, e.g., accounting concepts.

This helps the user feel confident about the outcome what they are about to do and reduce errors.

Form Validation

To see how to handle errors in Forms, refer to our Errors & Warning pattern documentation.

form_pattern_error.png

Progressive Disclosure

Certain form elements can be displayed only after a relevant element has been selected. This can be useful in shortening a form without losing critical information. When these hidden elements are inline, indenting the element can visually reinforce its relation.

form_progressive_1.png
form_progressive_2.png

Button Alignment

Place form actions at the bottom

form_button_bottom.png
form_button_top.png

Left alignment usage

Left alignment is used when the form is on a typical page.

form_button_left.png

Right alignment usage

Right-aligned actions occur when the form element is contained in a Modal or Drawer, or when a page has a sticky footer.

form_button_right_modal.png
form_button_right_drawer.png
form_button_right_page.png

Content Guidelines

Form Titles

Titles should clearly communicate at a glance what the purpose of the form is.

Job Dashboard

Agreement Details

Visits

General Info

Details

Other

Labels

A label is a short, meaningful description that clearly indicates what the user is expected to enter.

  • Labels should be 1 to 3 words and written in title case.
  • Labels should primarily be nouns. Avoid using labels as CTAs.
  • A label is not inline help and shouldn't be used to provide instruction.

Email Address

Phone Number

First Name

What is your email address?

My phone number is:

First name

Optional vs Required Labeling

Form elements can be additionally labeled as required (*), or optional (optional). The way to use these includes:

  • Be consistent within the complete form. This overrides preference on individual sections / pages of a form.
  • If the majority of form elements are required, only mark the optional fields.
  • If the majority of form elements are optional, only mark the required fields.
  • If there is a healthy mix, defer to the consistency of labeling in related user flows.

form_required.png
form_optional.png

Inline Help

Use sentence case capitalization

Keep help text 1-2 lines as long as the element itself

Most contexts for forms require a label. Some exceptions include when an icon can clearly explain the use case, such as a search input, or if a label exists elsewhere, such as a table column.

form_inline_text.png
form_inline_text_long.png

Is used for a character counter

form_inline_character.png

Model text inputs

Modeled text inputs are text field inputs that require text to be formatted in a specific way. Because modeled text inputs require a particular structure, always include examples that demonstrate how the user should enter the information.

  • Use help text to include an instructional call to action and an example that shows the required text format
  • If there’s not enough room to include both an instructional call to action and an example, then include only the example
  • Use the word “Example” followed by a colon to introduce the example (instead of e.g.)
form_model_text_1_do.png
form_model_text_1_dont.png
form_model_text_2_do.png