Intro

A form is used to present data to the user and to allow users to enter data in a structured way.

The form acts as a container for other components (such as labels, input fields, checkboxes, and sliders), which are structured in a specific layout.

Form - display and edit views

Form - display and edit views

When to Use

Do

Use the form:

  • When you require data input from the user to collect information (for example, in a survey or application form).
  • When the user can edit or enhance data that is already available.

Don't

Don’t use the form:

  • For presenting and editing a set of repeating data. Use a table instead.

Top Tips

Anatomy

Structure

A form is structured into form containers. Each form container consists of form elements.

  1. Container: The form is the top-level container component. It controls the content layout and the responsiveness.
  2. Group: The form group enables grouping of the form content.
  3. Form item: A pair of label and form field.

Structure of a single form container

Structure of a single form container

Parts of a Form

A simple form consists of a header area and a content area with pairs of label and form field.

  1. Header area: The header area is on top and displays a header text.
  2. Label: The label of a single form item. It serves as the name of the input field.
  3. Value: In display mode, the value is read only. In edit mode, a value can be added or edited.

Anatomy of a simple form

Anatomy of a simple form

Commonly Used Components

The following components are typically placed in the form container:

Types and Layouts

Form Variants

Form with Custom Header

You can use a custom form header (for example, with additional buttons).

Simple form with custom header

Freestyle Form

The freestyle form gives you full control of the form and its elements.

Example of a freestyle form

Layout Variants

Single Form on a Page

A single form can contain one or more groups.

Form with only one group and a header title

Form with only one group and a header title

Form with two groups and no header title

Form with two groups and no header title

guideline
  • If a form contains only one group, don’t use a group title. Instead, use the form title.
  • If the form is the only element on the page and if it has more than one group, you can use the group titles to capture the groups.

Multiple Forms on a Page

You can also use multiple forms on one page. Separate forms are more distinct visually than groups within a form.

Two forms on one page

Two forms on one page

Two forms on one page, with form groups

Two forms on one page, with form groups

guideline
  • For clearer group separation, use several forms on a page instead of a single form with multiple groups.
  • Provide a meaningful title for each form.
  • If needed, also use group titles within each form.

Default Layouts Per Size

Size S – 1 column by default.

Form in size S with 1 column

Size M – 1 column by default.

Form in size M with 1 column

Size L – 2 columns by default.

Form in size L with 2 columns

Size XL – 3 columns by default.

Form in size XL with 3 columns

Label-Value Alignment

You can align labels vertically or horizontally.

Vertical alignment: The vertically-aligned form best supports the reading flow and avoids unnecessary eye movements.
Horizontal alignment: If there is enough space, the label can be right-aligned next to the value.

Form - vertical alignment

Form - vertical alignment

Form - horizontal alignment

Form - horizontal alignment

Form Group Span

Form groups can be distributed into one or more columns.

Example:
Group More Information spans two columns.

Form group split into two columns

Form group split into two columns

Form Item Span

A form item can span several columns.

Example:
Form item “Full Name” spans in two columns.

Form item spanning two columns

Form item spanning two columns

Features

Label for Required Fields

The label of a required field is marked with an asterisk (*).

The asterisk is visible in edit view only.

Required field marked with an asterisk (*)

Required field marked with an asterisk (*)

Empty State Indicator

If a form field doesn’t have a value, an empty state indicator is shown by default in read-only mode.

The indicator helps the user to better scan the form and perceive the field label and empty content as one unit.

If a field is empty in the edit view, there is no empty state indicator. The field is either empty or displays a placeholder text, if defined.

Empty state indicator in a form (display view)

Empty state indicator in a form (display view)

Empty state indicator is not visible in edit view

Behavior and Interaction

The visual appearance of the form depends on the component state of the form fields. As a result, three form views are possible: display, edit, and edit with read-only fields.

Display View

The data is presented as label-value field pairs, without editable fields.

Form in display view

Form in display view

Edit View

The data is presented as label-input fields pairs, so users can enter or edit data.

Form in edit view

Form in edit view

Edit View with Read-Only Fields

Some fields are editable, and some are not (shown in read-only state).

Form in edit view with read-only fields

Form in edit view with read-only fields

Responsive Behavior

Breakpoints

The form component reacts and changes its layout on predefined breakpoints. Depending on its size, the form content gets divided into one or more columns.

Distribution of Columns per Layout Size

<div> <div>Size</div> <div>Recommended</div> <div>Default</div> <div></div> <div></div> </div> <div> <div>S</div> <div>1 column</div> <div>1 column</div> <div></div> <div></div> </div> <div> <div>M</div> <div>Up to 3 columns</div> <div>1 column</div> <div></div> <div></div> </div> <div> <div>L</div> <div>Up to 3 columns</div> <div>2 columns</div> <div></div> <div></div> </div> <div> <div>XL</div> <div>Up to 6 columns</div> <div>3 columns</div> <div></div> <div></div> </div>

Content Columns

A single form group consists of 12 columns. These invisible columns help to distribute the content within a form group regardless of the number of columns that a form is using per layout.

For example, the content-columns help to define form item span and form item empty space.

Visual example of content columns per form group

Example

S1 M2 L3 XL6: 1 column for S, 2 columns for M, 3 columns for L, and 6 columns for XL.

Form with breakpoint – Size S

Form with breakpoint – Size M

Form with breakpoint – Size L

Form with breakpoint – Size XL

Group Spreading

If a form contains more than one group, the group with the most items is wrapped with priority by default. In the XL example below, the Contact and Address groups each span two columns.

Form in size XL with 6 columns and groups that span 2 and 3 columns.

Form in size XL with 6 columns and groups that span 2 and 3 columns

Wrapping

To avoid text truncation, all values and labels within a form wrap by default.

Wrapped labels and texts in a form

Wrapped labels and texts in a form

By default, form titles wrap.

Form titles wrap by default

Alignment

If there isn’t enough space to show a horizontally-aligned form, the display switches to vertical alignment.

Form Label Span

By default, the labels take 4/12 columns, leaving 8/12 parts for associated fields/values.

Example:
The label takes 4 columns of the form, leaving 8 columns for the field.

Label-field distribution in a form

Empty Span

Additional empty space can be defined for a form item. By default, empty space is visible.

Example:
The proportion between the label, field/value, and the empty space is 4:7:1.

Proportion between label, field/value, and the empty space

Globalization and Localization

The form can be rendered in left-to-right (LTR) or right-to-left (RTL) reading directions.

Form in LTR mode

Form in RTL mode

Guidelines

Optional Label

All fields that are not marked with the required label by default are considered optional in a form.

In some cases, you might need to make such optional fields more distinguished than the required ones. To achieve that we recommend adding ‘(optional)’ at the end of the label. An item with ‘(optional)’ mark stands out more and indicates that the field is not required and does not need to be filled in by the user.

An item marked with ‘(optional)’ label

Unit of Measurement

You can add the unit of measurement after certain input components. Examples of supported input controls include multi input, select, combobox, multi-combobox.

If you display the unit of measurement after the input component, make sure that it’s properly visualized and doesn’t wrap to the next row.

Example of a form with different units of measurement

Components

Implementation

  • Form
    (UI5 Web Components documentation)

Specifications

  • Form (visual design)
  • Form (interaction design)

Components

Implementation

  • Form
    (UI5 Web Components documentation)