Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
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 further processing.
Forms may appear in workspaces, dialog popups, popovers,wizards,filter panes, details panes and cards.
...
Types
...
Type
...
Description
...
Example
...
Configuration forms
...
Allowing users to update predefined configurations.
...
Create / edit forms
...
Allowing users to create and edit objects.
By default, most of the fields are blank.
...
Usage & Behavior
Structure
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.
A collection of related fields can be grouped into a section. For example, fields like Email and Phone can be found under a section called Contact Information.
The action area usually consists of at least two buttons: a submit button (Save (, or Create, or Update etc.) and Cancel.
The Input Area
Field labels will appear on top of 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).
Two or more fields may be dependent. In this case:
Any dependent field will appear below the original (independent) field.
selecting a value for a dependent field will be possible only if there is a value in the original (independent) field.
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 it will appear below the form:
In dialog popups, popovers,wizards,filter panes, details panes and cards, the action are area will appear at the bottom of the container.
In workspaces:
If the form exceeds does not exceed the height of its container, the action area will stick to the bottom of the container, allowing users to scroll the form above itappear directly below the last field of the form.
If the form does not exceed exceeds the height of its container, the action area will appear directly below the last field of the form.
Add examples
Placement and Positioning
Do we need anything here?
Fields
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.
stick to the bottom of the container, allowing users to scroll the form above it.
Add example
States
Forms can have 3 states:
Idle - this is the default for creation forms. Exiting the form without changing anything will not add that entitystate when entering a form. In this case, exiting the form will not save it.
Dirty state - the state of a form switches to this state after making changes to the idle formbut before clicking the Save button. In this case, exiting the form will trigger an error message (see below).
Saved - the state of a form after clicking the Save button.
When first opening a configuration form it is defined as saved. Updating any of the fields, switches it to dirty state.
Interaction
- Forms has no intrinsic interactions. For component-specific interactions see the documentation of that component
Interaction
Clicking the submit button (Save, or Create, or Update etc.) switches the form to the saved state, and sends the data for further processing.
In case of creating or updating an entity, the user may be automatically directed to the original page (e.g., the list of entities).
In case of a dialog popup or a popover, clicking submit button will also close the popup / popover.
In case of a wizard: add links
Clicking a Next / Previous button will also go the the next / previous page.
Clicking the Done button will close the wizard.
Clicking the Cancel button will close the dialog popup / the popover, or automatically direct the user to the original page.
Validations and errors
There are two types of validations related to forms: field validation and form validation.
...
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.
Examples
 |  |
Accessibility compliance
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
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
...