Lead:  Liav Nadler  

Issues to cover

• Validations

  • Invalid values

  • Blank mandatory fields

• 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

Description

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

...

Basic Flow

• There are two basic form types:

  • Configuration forms - allowing users to change predefined settings.

  • Entity forms - allowing users to create and edit entities. In this case, most of the fields in the initial form are blank by default.

• Users can fill in form fields in any order before saving or applying the form.

• While filling in the form
  After filling in a form, clicking the Save button (in configuration pages) or the main button in dialogs triggers a validation (see below).

...

• A form consists of two areas: the input area and the action area.

• The input area may contain any set of components, including text fields, dropdown menus, checkboxes, radio buttons etc.

• Related fields can be grouped into sections. For example, we may find Email and Phone fields under a section called Contact Information.

• The action area usually consists of two buttons: Save for submitting the form and Cancel for resetting the form or closing the popup (see interactions below).

• In case the form fills the entire area of a workspace, the action area will appear at the top of the page. In any other case, it will appear below the form and always be visible:

  • Within the container

  • Exceeds the container

Placement and Positioning

...

• Field labels will appear on top of the input field (e.g., a text field or a set of radio buttons).

• On mandatory fields, a mandatory indicator () will be shown next to the label.

• Where relevant, a help icons will appear next to the label.

• In some cases, two or more fields will be dependent. In this case, selecting a value for the dependent fields will not be possible until a value exists in the main field.

• In configuration forms it is common the most or all fields have default values.

...

• Values have a distinct order.

• There is a default value.

• There are at least three possible values.

Don’t use:

• When?

General

• In case of large number of fields, group related fields together, providing a clear title to each group.

• Make sure that label texts are not selectable.

• Make sure there is a natural tab order between fields.

...

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

...