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.

• Inside various containers, including Dialog popups, popovers,wizards,filter panes, details panes and cards.

Image Added

...

Image Added

Usage & Behavior

Structure

...

• 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).

• For forms with inline inputs usage and behavior, see Inline Inputs.

Image Added

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, separated by a horizontal line.

    • In workspaces:

      • If the form does not exceed the height of its container, the action area will appear 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.

    • Inside containers, the action area will appear at the bottom of the container.

...

• Forms can have two states:

  • Idle / Saved - Applied when just entering a form or after clicking the submit button. In this statecase:

    • The submit button is disabled.

    • Exiting the form will not save it.

  • Edited - Applied after making changes but before clicking the submit button. In this statecase:

    • The submit button is enabled.

    • Attempting to leave the form will trigger a confirmation message (see Validation and errors below).

...

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

...