Lead:  Liav Nadler  

Issues to cover

• Inputs

  • Default values

  • Field dependencies

  • Mandatory indicators

• 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

• Autosave

• Preventing users from selecting labels

Description

A form is a collection of

...

inputs, allowing users to enter data that is then sent to a server for processing.

...

Forms may appear in

...

workspaces, wizards or dialog popups

...

.

...

Basic Flow

• There are two basic form types:

  • Configuration forms - allowing users to change predefined settings (e.g. service level indicators).

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

Some forms consists of both configuration and creation elements.

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

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

Usage & Behavior

General guidelines

Structure

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

• The input area may contain any set of controlscomponents, including text fields, text areas, dropdown menus, checkboxes, radio buttons, date and pickers, time pickers etc.

• Related inputs can be grouped together under a single title. For example, we may find Email and Phone fields under the title Contact Information.

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

• In case the form takes the entire area of a workspace, the action area will appear at the top of the page, opposite to the page title. In any other case, it will appear at the bottom of the container

Placement and Positioning

<<For example, in popups and toast messages>>

Labels above or to the left of input fields.

Default State

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

Content

<<Including labels, microcopy, number of items, order of items etc.>>

Internal Logic

• In some cases, form fields may be dependent on other fieldsForms may appear in workspaces, widgets, wizards or dialog popups.

• In case the form takes the entire area of a workspace, the action area will appear at the top of the page, opposite to the page title.

• If the form takes only part of the workspace (e.g., inside a dialog or a widget), the action area will appear at the bottom of the container. In this case, the action area will also be sticky, to allow users scrolling along the form, without hiding the action buttons.

Fields

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

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

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

States

• Forms can have 3 states:

  • Idle - this is the default for creation forms. Exiting the form without changing any field will remove

  • Dirty state - a form switches to this state after making any chang

  • Saved -

• When first opening a configuration form it is defined as saved. Updating any of the fields, switches it to dirty state.

• On dirty state the user can either save (or apply) the form

...

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

...