Page History

...

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.

Image Added

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.

Image Added

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. A label should state the required input clearly and stay short so users can move quickly from field to field.[Image placeholder: Close-up example showing label placement and how labels align across multiple fields. ]

Input options

Forms capture information through different input options. Some options inputs are free-form (users type), others are controlled (users select or scan). Choosing the right input option reduces effort and prevents errors.

[Image placeholder: Form section showing a mix of text entry, selection, date/time, and file upload.]

Forms capture information through different input options. Some options are free-form (users type), others are controlled (users select), and some are assisted (users pick from a calendar, upload files, or scan codes). Choosing the right input option reduces effort and prevents errors.

For short text values, use a single-line input. When users need to enter longer text (for example notes or descriptions), use a multi-line textarea so the layout supports reading and editing. If your product supports internationalized text entry, use translation inputs for localized values.

For choices, use selection controls when you can restrict entry to known options. Use radio buttons when one option must be chosen and keeping options visible helps decision-making. Use single select or multi select controls when options are better placed in a dropdown. If the list is large or dynamic, prefer controls that support search or table views (for example combobox, lookup input, or table selection).

, 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.For numeric, date, and time information, prefer dedicated inputs (number input, date picker, date range picker) instead of free typing. For attachments, use file upload patterns or a files table when users manage multiple files. Where scanning is the primary and fastest method, use scanners (RFID or visual codes).

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.

[Image placeholder: Form example showing tooltip + placeholder text + helpertext in context.]

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.

[Image placeholder: Tooltip icon next to a label with an example tooltip message.]

Placeholder text

Image Added

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

[Placeholder: Add specific placeholder text rules and examples.]

[Image placeholder: Placeholder text example in a text input.]

Helpertext

Help text always appears below the form title and assists the user in entering the correct information. The help text can refer to the entire form or only to individual parts of the form.

Help text is always available, even if the field is focused. Therefore, it is the right choice for information users need to know. For context or background information that is "nice to have", use placeholder text or a tooltip.

[Image placeholder: Help text below the form title + helpertext for a specific form section.]

...

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.

Image Added

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.

Group related tasks under clear section titles so the interface is easier to understand at a glance. Arrange fields in a logical, predictable order—for example, first name first and last name second—so users can move through the form without surprises.

[Image placeholder: Well-structured form with clear section titles and a predictable field order.]

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.

[Image placeholder: Good label examples (short, clear, no colons).]Image Added

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.

Image Added

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.[Image placeholder: Spacing example showing 24px outer spacing, 8px between fields, and sublines separating groups.]

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.

Image Added

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.

[Image placeholder: Side-by-side examples of good tooltip usage vs bad tooltip usage.]

...

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.

[Image placeholder: Helpertext examples for whole-form help and section-level help.]Image Added

Error and Validation

...

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.[Image placeholder:

Inline error message + disabled primary button + inline notification.]Image Added

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.

Image Added

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.

Image Added

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.