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.

...

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

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

• The action area consists of a submit button (Save, Create, Update etc.) and additional actions, if needed.

• In dialog popups, wizards,filter panes, details panes and cards, an additional Cancel button may appear.

...

• 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, see Inline Inputs.

...

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

...

• Forms can have two states:

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

    • The submit button is disabled.

    • Exiting the form will not save it.

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

    • The submit button is enabled.

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

Interaction

• Clicking the submit button:

  • sends the data for further processing (for error handling see Validations and errors below).

  • On workspace forms:

    • If the form was submitted successfully, a success toast will appear (see Toasts).

    • If the form was triggered from a parent page, the user will be directed back to that page.

  • For dialog popups, popovers,wizards,filter panes, details panes and cards, see the corresponding component documentation.

• Clicking the Cancel button will close the corresponding component (if not pinned), without saving the data (a confirmation popup may appear).

...

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

...