Form

The Form component is a slightly opinionated <form> tag with a flex layout and set vertical gap.

Zoning

Style

• The vertical gap between fields, unless specified otherwise, is spacing-s.
• The horizontal gap between inlined elements in a form is spacing-m.

The spacing docs can be found here.

States

Skeleton

Field states

Error

When an error occurs at a level that is not specific to one field, use InlineMessage to give the user feedback:

The InlineMessage docs can be found here.

Content

Form inline help

Consider using an Inline message when help is needed to fill the form.

Interactions

Synchronous action

Data loss message

When the user clicks on the cancel button or go back to the previous page, provide a confirm dialog.

You can easily build that dialog with the Modal component..

Error focus

In case of error after submission, the focus on the screen should be on the first field errored. If more than one field in error, the focus should be placed on the first one.

Usage

Choosing between readonly and disabled states is not really easy! A readonly element is not editable, but gets sent when the form is submitted. A disabled element isn't editable and isn't sent on submit. Another difference is that readonly elements can be focused (and getting focused when "tabbing" through a form) while disabled elements can't.

Accessibility

Non applicable