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.
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. 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
Placeholder text 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.
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).]
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.
[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.
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.]
Helpertext
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.]
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.]
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.
...
