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

Forms

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

Forms are comprised of some or all of the following elements.

overview.png

• 01 - Input label In the filled state the label moves to the upper left area.this makes labes in the form of an overline obsolete.
• 03 - Input label In the default state, the user always sees the label. The label describes the type of input. If the input is marked with an asterisk, it is a mandatory input.
• 04 - Data dropdown Information can be entered through a variety of non-free form dropdowns fields as well.
• 05 - Text input A text input can be used if the user needs to enter a longer text, e.g. for a description, question or note.
• 06 - Checkbox
• 07 - Confirm button Allows users to submit or exit a form.
• 08 - Info field Gives the user additional information about the entire form or individual assets.

Behaviours and Patterns

Tooltip

tooltips.png

Validation

validation.png

Calendar

calendar.png

Form Validation 1

validation_1.png

Form Validation 2

validation_2.png