Structure and behavior
Usage guidelines
- When prompting a person to submit information in text format.
- To present information that has already been submitted by a person. Use a list instead. If the information needs to be edited, provide an edit button and then show the information as a form once it is ready for text input.
Anatomy
A form can contain a wide variety of elements, but the main thing is to organize them in a clear hierarchy.
1. Title
A form title informs someone of the primary task associated with the form.
2. Sections
Sections should be used to group form fields and controls in a logical way. This helps users more easily digest content and allows users to skim the contents of the form.
3. Form fields and controls
These components allow us to gather information from users when they fill out forms. Gestalt has a wide variety of form fields and other user inputs that can be used in forms. Some examples include check boxes, radio buttons, combo boxes. For a full list, see Available components
4. Buttons
Buttons allow users to submit forms or perform other actions.
Use a local, in-page navigation or table of contents to navigate between sections of a form and keep the control distinct from primary and side navigation.
Hierarchy
Form and section titles
Titles describe the form at a high level and should be the largest text size in the form hierarchy. We recommend Heading/lg (font size 600). The title can also be followed by subtext if additional context is needed with a recommended text size of Body/lg (font size 300).
Section titles describe a group of form fields and controls within the form and should fit within the form hierarchy by being one header size smaller than the heading while remaining larger than form field text sizes. We recommend Heading/md (font size 500) for section headers. Subtext can be added to sections if needed, we recommend Body/lg (font size 300) for subtext."
Recommended text sizes
Item | Figma style | Design token | Color | Platform |
|---|---|---|---|---|
Title | Heading/lg | $font-size-600; $font-weight-semibold | $color-text-default | Web |
Section title | Heading/md | $font-size-500; $font-weight-semibold | $color-text-default | Web |
Subtext | Body/lg regular | $font-size-300; $font-weight-normal | $color-text-subtle | Web |
Form fields and controls
Form fields and controls should match the text size determined by their individual components and be organized in a logical way to increase user comprehension.
Buttons
Placement
Buttons should be at the bottom of the form. If a form is in the context of a page, buttons should be start-aligned and in line to the form contents.
However, if a form is in the context of a Modal or OverlayPanel, end-aligned buttons are appropriate, in order to be consistent with placement of buttons in other overlays.
For consistency throughout Pinterest products we recommend that the primary button be to the right of the secondary button.
As a general rule a sticky footer should not be used in order to reduce potential confusion in regards to the length of the form, but may be considered if a form is non-linear or if users are likely to review their entries before they submit the form.
Spacing between sections and elements
Vertical spacing helps define sections within forms and improves scannability. We recommend:
- 40 px between form sections
- 32 px between elements in a section
Columns
Forms should default to a single column as multi-column forms are more prone to misinterpretation, however some fields that are related can be placed next to each other. For example:
- [first name] [mi] [last name]
- [credit card number] [expiration date] [security code]
- [city] [state/province] [zip code]
Arrange forms in a single column with only closely related fields in two columns
Arrange all form fields in two columns as that is harder to complete.
Behavior
Disabling buttons in forms—especially in longer formscan cause frustration since it can be difficult for users to find what they missed. We recommend that for most forms buttons remain enabled and return errors if the form requirements are not met.
If a form is very short and all contents of the form can be viewed without scrolling buttons may be disabled until all requirements are met. This is especially true for forms that only require 1–2 inputs, or where a user must acknowledge via a checkbox that they understand the consequences of submitting a form.
Error handling
In Form components
Error handling is automatically taken care of within form components like TextField, RadioGroup and Checkbox
Across an entire form
In longer forms, it can help to add a BannerSlim to the top of the form that alerts users about various form errors.
