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 layouts organize input fields for our users to enter data and configure options. A form layout should be easy to scan, understand and complete.
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.
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.
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.
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.
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.
Always align checkboxes (and radio buttons) vertically.
Most forms should have a submit button. Use
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.
Validation should occur on submission of the form.
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.