Lead:  Liav Nadler

...

A form is a collection of input fields, allowing users to enter data that is then sent for further processing.
Forms may appear in workspaces, dialog popups, popovers,wizards,filter panes, details panes and cards.

...

• Where possible, field labels will appear above the input field (for example, above a text field or a set of radio buttons).

• Where relevant, a red mandatory indicator (*) will show next to the label.

• Where relevant, a help icon will appear next to the label (aligned to the right side of the field, if possible).

• A collection of related fields can be grouped into a section. For example, fields like Email and Phone can be found under a section called Contact Information.

• For forms with inline inputs, see Inline input.

The Action Area

• The action area will always be visible:

  • In case the form takes up the entire workspace, the action area will appear at the top of the page (see examples below).

  • In any other case, the action area will appear below the form:

    • In dialog popups, popovers,wizards,filter panes, details panes and cards, the action area will appear at the bottom of the container.

    • In workspaces:

      • If the form does not exceed the height of its container, the action area will appear directly below the last field of the form.

      • If the form exceeds the height of its container, the action area will stick to the bottom of the container, allowing users to scroll the form above it.

...

• A form cannot be saved or submitted if one or more of its fields are in error state. Here is a typical flow:

  • When entering a form, the submit button is disabled (the Cancel button is always enabled).

  • On updating any field, the submit button becomes enabled.

  • In case of an input error, the submit button becomes disabled (an additional form-level indication may appear). Only after the error was resolved, it becomes enabled again.

  • After clicking the submit button:

    • it becomes disabled,

    • a toast message appears, indicating that the form was saved.

• This flow is similar where the form is in a dialog popup, but in this case, clicking the submit button closes the popup.

• When a form has a single required field, the validation will appear only after the user tries to submit the form.

...

• In case the user tries to navigate away from a form after updating one or more fields, a message popup will appear, allowing her him to either keep editing or leave.

• In this case, leaving the page will not save the changes.

...

• In case the user tries to navigate away from the form while there are errors, a message popup will appear, allowing her him to either keep editing, or leave.

• In this case, leaving the page reverts all fields their last valid values.

...

• Creating or updating entities (e.g., users, roles, channels).

• Configuration pages (e.g., services level indicators, storage retention periods).

Don’t use:

• When?

General

• Provide a clear navigation order:

  • By default, form fields should form one column.

  • Closely related fields (e.g., First name and Last name) can appear side by side.

  • A collection of related fields should be grouped under a clear title.

• Make sure label texts are not selectable.

Issues to cover

• Form-level elements

  • Status tags

  • Messages

• Action buttons

  • Distances between buttons (if more than 2)

• Guidance

  • Form instructions

  • Field help

  • Ask Femi about web SDK form guidance

• Autosave

Examples

Update screen

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

text highlight when using a keyboard + using arrows when in edit mode (left, up or home to set the insertion point at the beginning; right, down or end to set it at the end).

Design

...