Form

When to Use

Use forms to gather information from the user.

When Not to Use

For short task completions that require the user to stay in context of the current main task, use dialogs instead.

Title

Forms should start with a short and concise title that clearly states the purpose of the form. Titles are especially relevant for users returning to the form after a break. It will help them get back into the form context quickly.

Subtitle

While the title should stay short and concise, you can use a subtitle to describe the form further. You can use this part to set expectations for filling out the form, like what happens after filling out the form or what data users will require while filling out the form. For long forms, you might also include how long it usually takes to fill out the form.

Keep in mind that many users will skip this part. Therefore, don’t put any essential information here.

Content

The central part of a form is the content section. Here, the relevant data is gathered from the user. Various components can be used for the different types of questions. Please refer to the individual component guidelines for their correct usage.

One typical mistake is the use of toggle buttons in forms. Toggle buttons turn an option on or off instantly, which is rarely true in forms. Use checkboxes instead.

Button Row

At the bottom of all forms, users will find a row of buttons. Here, users can submit the form or cancel their inputs. Use labels that clearly describe what happens when submitting the form. Review the button guidelines for tips about the correct wording, capitalization rules, and more.

Avoid disabling the submit button to indicate that some content is missing. Instead, always keep the button enabled, even if some input is missing. If users click the button before entering all required information, error messages will inform the users of what's missing.

Input Validation

Whenever client-side checks are possible, do them immediately after the user makes an invalid input. Don’t delay checks until the user submits the form.

If the validation takes longer than 2 seconds, display a loading indicator to the right of the component.

The default option for displaying error messages is to set the component in an error state. Avoid using error bubbles for forms.

Ensure that error messages describe errors as clearly as possible. Avoid using generic error messages.

If your field contains a description text, include the content of this description text in the error message.

When a components size changes after it is set into an error state, all components and content below the erroneous component are shifted, so that the distance between all components remain the same.

Page Refresh and Redirect

Whenever possible, persist forms on refresh so that user data isn’t lost.

If you use links in your forms, for example, within descriptions, make sure they open in a new tab in the browser.

Masking User Input

Instead of forbidding disallowed inputs, it's better to allow all inputs and display an error message when an invalid input is detected.

If the input field only accepts small numbers and no other input types are allowed, you can add a stepper control to visually indicate the requirement for a number.

On mobile, show a keyboard that matches the input restriction, such as displaying the number keyboard for numerical input.

Required And Optional Fields

To indicate if a field is required or optional, put (optional) behind all optional fields and leave required fields without any additional note.

For all optional fields, consider removing them altogether. In many cases, the optional fields are unnecessary and make the form more complex without adding value.

Defaults And Suggestions

Only set default values if you're confident that the vast majority of users will stick with the default option or if the input can be detected automatically. In other cases, it is best to levae them empty.

Providing users with input suggestions while they type can significantly speed up the form-filling process.

Placeholders

Don’t substitute labels or other critical information in forms with placeholders. Instead, include all essential information in the label or description.

While replacing labels or essential information with placeholders is not recommended, you can use placeholders to provide example inputs. Begin your placeholder with "E.g.," to indicate that it's an example.

Disabled Components

Avoid using disabled components unless it's clear why they're disabled or what actions users need to take to enable them.

Autofocus

Autofocus the first field by default. Ensure that the form can be navigated correctly with the tab key in the correct order.

Descriptions And Tooltips

Keep labels short and descriptive, ideally using three or fewer words. If this isn't doable, use help text instead of lengthy labels.

For less critical descriptions, you can attach an (i) icon to the component's title and display the information on hover using a tooltip. Don’t do this if the information is essential.

Feedback After Form Completion

Provide users with confirmation after they submit a form. This can be achieved through a message or by displaying a follow-up screen indicating the submission was successful.

Conditional Components

If components depend on another component, for instance, a field only activated after a checkbox was clicked, use horizontal indentation to illustrate their hierarchy.

Component Order

Ensure that the form questions are structured logically, considering the user's viewpoint rather than the application’s or database's viewpoint.

Label Position

In most cases, aligning labels to the top of the component is best. This format lets users view the label and current input without making significant eye movements between them.

Left-aligned labels can be used sometimes, but it's generally not recommended for most forms. However, they're suitable for scenarios where users search for a specific field instead of filling out a complete form, such as in profile or settings pages.

Arrangement

In general, arrange all fields below each other. Don’t put multiple fields into the same line just because it fits the layout. Only put multiple fields into the same line if the fields are closely related, for instance, input fields for the zip code and corresponding city.

Spacing

Use 24 pixels of spacing between the form title and the first component. If your form includes a subtitle, add 8 pixels of spacing between the title and the subtitle.

For top-aligned labels, use 16 pixels of vertical spacing. For left-aligned labels, use 32 pixels.

Sections

Whenever possible, structure your form into sections. This helps the user not to get lost and to stay in the context of the field they're currently filling out.

Use 32 pixels between multiple sections and 12 pixels between the section title and the related section.

Multi-Page Forms

In general, don’t use multi-page forms or tab bars to split the content of your forms. Instead, put everything on one page. This way, users can scroll to re-enter fields instead of clicking through the pages.

However, if one section completely depends on the earlier section, using multi-page forms is fine.