Lead:  Liav Nadler  

Issues to cover

Inputs

...

Default values

...

Field dependencies

...

• Validations

  • Invalid values

  • Blank mandatory fields

  • Leaving the page without saving

  Grouping

  • fields

• Form-level elements

  • Status tags

  • Messages

• Action buttons

  • Top for form-level

  • Bottom for widget-level, sticky

  • Distances between buttons (if more than 2)

• Guidance

  • Form instructions

  • Field help

  • Ask Femi about web SDK form guidance

• Autosave

• Preventing users from selecting labels

Description

A form is a collection of inputsinput fields, allowing users to enter data that is then sent to 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 (e.g. service level indicators).

  • Creation Entity forms - allowing users to create new entities (e.g. employee evaluations)and edit entities. In this case, most of the fields in the initial form will be are blank by default.

Some forms consists of both configuration and creation elements.

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

• While filling out 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, text areas, dropdown menus, checkboxes, radio buttons, date pickers, time pickers etc.

• Related inputs fields can be grouped together under a single titleinto sections. For example, we may find Email and Phone fields under the title 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 takes 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 at the bottom of the container and will stick to the bottom. The action area will always be visible (i.e., stick to the top or bottom).below the form and always be visible:

  • Within the container

  • Exceeds the container

Placement and Positioning

...

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

• On mandatory fields, the a mandatory icon 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 are will be dependent. In this case, selecting a value for the dependent fields will not be possible until there is a value on 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

...