A form is a collection of related controls for users to provide data and configurations.
Forms are made up of many possible components, including many represented below.
Spacing between form elements is typically 32px, or $spacing-4
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.
As a rule, form element width should conform to the size of the Drawer’s set width.
As a rule, form element width should conform to the size of the Modal’s set width.
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.
Refer to the Settings Templates and Examples for more specific examples of Form usage in this layout.
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.
Inline help is strong at providing additional information necessary to complete a form.
Overlay help can de-clutter a page by putting less important, supplemental information behind an overlay element.
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.
The information icon (i) is harder to read on low pixel-density monitors.
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.
In general, placeholders should be omitted, as they have many downsides:
Input fields such as search, when paired with the icon, can be sufficient.
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.
To see how to handle errors in Forms, refer to our Errors & Warning pattern documentation.
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.
Left alignment is used when the form is on a typical page.
Right-aligned actions occur when the form element is contained in a Modal or Drawer, or when a page has a sticky footer.
Titles should clearly communicate at a glance what the purpose of the form is.
Job Dashboard
Agreement Details
Visits
General Info
Details
Other
Email Address
Phone Number
First Name
What is your email address?
My phone number is:
First name
Form elements can be additionally labeled as required (*), or optional (optional). The way to use these includes:
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.
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.
This is true even in a form with lots of overlay help. Either find unique supplemental information to discuss, or remove the overlay help.
This is true even in a form with lots of overlay help. Either find unique supplemental information to discuss, or remove the overlay help.
This is true even in a form with lots of overlay help. Either find unique supplemental information to discuss, or remove the overlay help.
Users generally have to recall overlay information when completing the form element. Inline help lets the user read it at all times.