Patterns

Forms

These conventions are intended to provide guidance for both layout and proper usage of various form elements.

Designing an effective form requires consideration for its information hierarchy, sequence of form elements, clarity of labels, affordance, feedback, and accessibility.

Form layout

Form layouts organize input fields for our users to enter data and configure options. A form layout should be easy to scan, understand and complete.

Columns

Typically, forms should be one column. Multiple columns can be disruptive to a user’s vertical momentum. However, related fields are sometimes represented as a group on a single row when a mental model suggests they be treated as a singular concept. For example, city, state, and zip might be considered an “address”.

Use to handle most aspects of a form’s layout.

Sections

Form sections are created using .

  • If a form is organized in sections, each section should have a .
  • If necessary, provide a concise description of what’s represented in each section.
Billing information
This is the name and address as listed on your credit card statement.

Optional vs. required fields

Inputs in a form should be required by default. Be mindful when requesting optional information. Added inputs increase cognitive load and the perceived effort required to complete a task. If you must ask a user for optional information, then denote it as “optional” in it’s label.

Input fields

The length of the text field affords the length of the answer expected. Employ this for text fields that have a defined character count like phone numbers, zip codes, etc.

Helper text

Is used to provide additional guidance with a form field. Helper text is added via the prop.

Helper text should be:

  • Meaningful and concise
  • Sentence case

The SKU is the unique number associated with your product located at the bottom of your receipt.

Checkboxes

Always align checkboxes (and radio buttons) vertically.

Email subscriptions

Form submission

Most forms should have a submit button. Use primary or secondary for a main call to action and default for a secondary action. Always use a descriptive call to action.

Asynchronous inputs should mostly be avoided. Use your best judgment when deciding whether or not your specific needs warrant one. Be sure to provide users with clear feedback about the state of the input and submission.

Inline validation

Validation should occur on submission of the form.

Passwords must contain at least one capital letter, one lowercase letter, and a number.

Real-time validation can be messy and distracting for the user. Only use real-time validation in scenarios where errors can be easily prevented. For example, a character counter for an input with character limit.

Do’s and Don’ts

Do
Group related information logically. Use to create sections.
Don't
Use text as an alternative to a label.
Do
Use the prop that is built in to the component to manage labels.
Don't
Use in place of built in .
Do
Rely on the built in validation in the component rather than creating custom styling.
Don't
Validate in real-time unless it helps users in the case of creating a password, username, or message with a character count.
Do
Tailor the length of form fields based on the content.

Resources and Inspiration