(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Forms

Overview

A form is a group of related input controls that allows users to provide data or configure options. Forms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation.

Anatomy

In general, forms have a padding of 24px arround the content. Elements inside the form like lables or input options have a distance of 8px eather vertically or horizontally between each other. This distance redces to 4px between text elements like titles and labels.

If the form has lot of content, it can be usefull to group certain elements. THis can be done with white space, wich should be 24px. This space expands by an additional 12px to a total of 36px bevor a title within the form.

Labels

Labels help users understand what the corresponding inputs mean. They are the user’s first point of orientation in a form and make it clear what information is being requested. Lables are directly connected to the input and usually configured in Visual Properties.

Labels are part of the form’s structure, not decoration. Even if input controls look different, they still need labels so the form stays scannable and predictable.

Input options

Forms capture information through different input options. Some inputs are free-form, where users type a value, and others are controlled, where users select, pick, upload, or scan. In general, use free-form inputs when the value cannot be predefined, and use controlled inputs when you want to restrict entry to valid values or make entry faster and more consistent.

For a detailed breakdown of specific input components and when to use them, see Selecting the right input.

Help

Help provides in-context guidance like tooltips, placeholder text, or helper text, to assist the user in providing the right information. Help should reduce uncertainty and prevent avoidable errors.

Placeholder text is a lightweight hint inside the input. It can show an example value or expected format. It should not replace the label.

Tooltips

Tooltips can provide additional explanation for users that may be unfamiliar with a particular form field. They can also offer rationale for what may seem like an unusual request.

Best Practices

Forms are meant to gather information and guide people with as little fuss as possible. To help users scan and complete a form quickly, ask only for information that is absolutely necessary.

Labels

Use sentence-style capitalization for all text elements, except for product names and proper nouns. Every input component needs a label, even if it is styled differently from other fields. Labels should clearly state what is required and stay focused on the essential meaning of the input. Do not use colons after label names. A label is not helper text, so it should be short and scannable—ideally one to two words.

Spacing and grouping

Forms use consistent spacing to stay readable and predictable. The form should have a circumferential spacing of 24px. When inputs, datafields, and similar elements are arranged directly next to each other, the spacing between them should be 8px.

If input groups are separated, they should be separated with sublines. An introductory text below the subline is optional and can be used when users need extra context for the next group.

Tooltips

Tooltips should be used intentionally and sparingly. Use the outlined “i” (info) icon and reserve tooltips for explanatory or added information that helps users understand a field without cluttering the form. Because tooltips are microcontent, keep them concise and focused.

Tooltips are not a catchall for content that does not fit elsewhere. Do not place essential information in a tooltip, because users may miss it.

Help

Use help text below the form title when it applies to the whole form. Use helpertext for information users need to know while completing the form, especially when it prevents mistakes or clarifies requirements. If the information is “nice to have” rather than required, prefer placeholder text or a tooltip instead.

Error and Validation

Effective and immediate error messaging helps the user understand the problem and how to fix it. Start by explaining what happened, then guide the user toward the next step or the resolution. Error states should always be shown on the form, and inline errors should be used whenever possible so users can fix issues without searching.

If an error blocks completion, keep the form open and disable the primary button until the error is fixed. When needed, support the inline error with an additional inline notification to make the problem and required action even clearer.

With or Without Tabs

Use a standard Form when the content can be understood and completed in one continuous flow. This layout works well for most create and update tasks because users can scan the fields from top to bottom, enter data, and submit without navigating between sections. A Form supports structured data entry, editing, submission, data binding, validation, and automatic form generation based on data schemas.

Use a Tabs Form when the form becomes complex and dividing it into clearly separated sections improves the user experience. Tabs Form uses a vertical tab-based layout where each tab contains its own form or content. This approach helps users focus on one topic at a time, prevents long scrolling, and makes large forms easier to understand. Tabs Form should be used when the content naturally breaks into logical groups that users can navigate between, while still keeping validation and saving consistent across the whole experience.

Vertical Tabs only occure inside Dialogs.

Selecting the right input

Choosing the right input type reduces effort, prevents errors, and keeps the form easy to scan. Use the sections below to match what the user needs to enter with the input option that supports it best.

Free-form input

Use free-form inputs when users need to type information that cannot be reliably selected from a predefined list. Pick the option that matches how much text is needed, whether it must be localized, and whether the value should be restricted to numeric entry.

Selection

Use selection controls when users should choose from predefined options instead of typing. The right control depends on whether the choice is binary, single, or multiple, and on how large or complex the option set is.

Date and Time

Use date and time inputs whenever users enter time-based values, because pickers prevent formatting errors and reduce cognitive load. Choose between a single point in time and a full period depending on whether one date or a start–end range is required.

Files

Use file inputs when attachments are part of the submission. Choose a simple uploader for small numbers of files, and a table-based approach when users need an overview, actions, or management of multiple attachments.

Scanning

Use scanning inputs when data is best captured through RFID or visual codes rather than manual entry. Scanning is ideal for workflows where speed and accuracy matter and a scan-first experience reduces mistakes.