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 a further processing.
Forms may appear in workspaces, wizards or dialog popups, popovers,filter panes and cards.
...
Types
...
Type |
|---|
...
Description | Example |
|---|---|
Configuration forms |
...
|
...
| |
Entity forms |
...
|
...
|
...
|
...
|
...
Users can fill in form fields in any order before saving or applying the form.
...
Basic Flow
A form may appear when navigating to a workspace or clicking a button.
Filling in the form. This can be done in any order.
Clicking the Save (or Create or Update) button.
In some cases, the form is validated
Usage & Behavior
General guidelines
...
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, dropdown menus, checkboxes, radio buttons etc.
Related A collection of related fields can be grouped into sectionsunder a section. For example, we may find Email and Phone fields under a section called Contact Information.
The action area usually consists of two buttons: Save (or Create, or Update) for submitting the form, and Cancel for resetting going back without submitting the form or closing the popup (see interactions below).
In case the form 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 below the form and always be visible:
Within the container
Exceeds the container
Placement and Positioning
...
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.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 anything will not add that entity.
Dirty state - a form switches to this state after making changes to the idle form.
Saved - 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.
...
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
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
...