Form Design

Provide Autosave

Especially longer forms should provide autosave by default. You should also provide a very clear feedback by displaying a message that shows when the last autosave happened or a Save-Button. The user should be always able to also save forms with an error.

Top-left aligned labels are best for readability & completion

Placing labels above input fields is preferable since research show these are better trackable for users than left-aligned labels read more

<TextInput
  labelText="Text Input label"
  helperText="Optional helper text."
  placeholder="Placeholder text"
/>;

Avoid placing inputs side-by-side.

User attention should always be directed on one task at a time, 2 items on the same line will compete for attention as there is no visual priority between them, resulting in a heavier task for the user.

The only exception to this rule is when the input needs multiple field elements like asking for dates (day, month, year) or time (hours and minutes), where multiple fields are expected to be on one line. Read more about principles in form design.

2 columns layout exceptions apply to

• dd – mm – yyyy (date picker)
• amount – currency
• national prefix - phone number
• first name - second name - last name

Information that people will find in the same place

• CVV and credit card expiry date

Information that are complementary and/or more meaningful if read together

• currency - currency exchange rate

When one field is non editable and used for comparison/reference purposes

• country data input - RB data read only

Group related fields together into sections or steps

If your form has more than six fields, it’s considered good practice to group questions into logical sections or steps. Use the <FormGroup/> component for this behaviour.

Validate Fields after Users Submit the Form

Inline validation post submission minimizes completion times, form errors, and user frustration. Make sure you’re validating your fields when users are in revision mode, not completion mode, otherwise you’ll slow them down.read more

Avoid Multistep (Wizard) forms if not necessary

It is okay to place more than 10 inputs on a page.

Multistep (Wizard) Forms

Apply to these rules when developing a wizard form:

• Keep the number of steps at the minimum read more
• A review step is mandatory. This step should also do a server-side check of all data entered and show a summary.
• Show errors when the user wants to change a page (or do live validation)
• Stop the user from moving to another page when wrong content was entered (make sure it is possible to move to other pages when no content is entered, except when it is needed on the following pages)
• Use checkmark indicator once wizard page is filled completely.
• Use warning indicator if some content is filled

Validation

Validation summary

Always provide a validation summary at the top of the form. This is especially important for longer forms.

Mention the number of errors and provide a list of the fields with errors. Each error should be a link to the field with the error. This will help the user to quickly find and fix the errors.

<Callout title="Something went wrong" kind="warning">
  <p>
    There are errors in the form. Please fix them
    before submitting.
  </p>
  <ul>
    <li>
      General error that is not related to a specific
      field
    </li>
    <li>
      <Link href="#field1">
        Your password must be at least 6 characters
      </Link>
    </li>
    <li>
      <Link href="#field2">
        Field 2 needs to be a valid user
      </Link>
    </li>
  </ul>
</Callout>;

Use inline validation

Also add a validaton message to the input field itself. This is especially important for longer forms.

Be clear with your error messages

Always try to explain the root of the problem. Try to use a human language and explain what exactly the user/the system made wrong, and what exactly should be fixed/filled.

<TextInput
  type="password"
  required
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
  id="field1"
  labelText="Password"
  invalid={true}
  invalidText="Your password must be at least 6 characters"
/>;

And, more importantly, always try to explain the root of the problem. Try to use a human language and explain what exactly the user/the system made wrong, and what exactly should be fixed/filled.

Before submitting content provide dialog modal

Always ask the user before submitting input. Do not ask if the user only saves the input.

After submitting

Always provide a feedback message after submitting the form. This message should be displayed at the top of the form or in a dialog modal.