Form behaviour

This chapter describes how a form should react to user input while being filled out.

Overview

Consistent form behaviour is crucial for a consistant user experience across different apps.

Therefore, we strongly advice to think about how your users interact especially width forms throught your application and try to adhere to the following guidelines:

First interaction with a form

When a user enters a form for the first time, the primary action should be enabled as soon as the form can be submitted purposefully (when submitting the form actually does something useful, e.g. creating an empty object with a random ID). It should not be enabled if submitting cannot be done due to form validation errors, e.g. if an object needs at least a name to be created.

As soon as all mandatory fields are filled and validation succeeds, the primary action can be enabled.

Form behaviour — Exemplaric form behaviour with validation, leaving the fields by clicking outside was done on purpose to explicitely show each field's validation.

Editing an already filled in / prefilled form

When a user enters a pre-filled form (e.g. editing of an existing object) the primary action is enabled as long as the form is submitable (meaning no form validation kicks in). It does not matter if the content of a form is not changed (or changed back to the same state as initially), the primary action can also be triggered with the exact same form content.

When to disable / enable the primary form action

The primary action should be disabled / enabled by following the form validation: It shall be disabled as soon as a form validation kicks in and enabled as soon as there is no form validation error present. For further information see see form validation.

Form validation in general

Don’t neglect the importance of a clear and understandable form validation: Disabling the primary / submit button in a form alone does not offer any advice of how to successfully complete a form.