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

Form

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11547-229074&t=ftfrOGkPzlG2GaTo-1

Overview

• The Form component is used to create interactive forms with various input controls.
• It supports data binding, validation, and automatic form generation based on data schemas.
• Dynamic Forms can handle data entry, editing, and submission.
• They are suited for create and update operations in applications.

...

• events – Configures the events that the form can trigger and respond to:
• ON_VALUES_CHANGE – Triggered when form values change. Provides the current form values for validation or dynamic UI updates.
• ON_INIT – Triggered when the form is initialized. Can be used to perform setup operations like loading reference data.
• ON_DESTROY – Triggered when the form is removed from the DOM. Useful for cleanup operations.
• ON_FORM_SUBMIT – Triggered when the form is submitted. Can be used to perform custom validation or processing before submission.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11547-229074&t=ftfrOGkPzlG2GaTo-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/introduction/forms

Guidelines

Tooltip

• Tooltips should be used sparingly:
• Use the outlined “i” (info) icon for explanatory or added information.
• Keep tooltips concise, never place essential information inside them.

...

• Helper text:
• Appears below the form title or individual fields.
• Always available, even when the field is focused.
• Use it for necessary guidance; use placeholder text or tooltips for optional background info.

Usage

• Use for create/update data entry flows: connect to a submission endpoint via dataSourceId, map payload with dataSourceHttpRequestParametersMap, and choose dataFormat ("json" or "formdata").

• Use for editing existing entities: on events.ON_INIT, fetch record data with getEntityDataSourceId and parameterize it via getEntityHttpRequestParametersMap.

• Include constant metadata on every submission using staticValues and non-visual fields via additionalFormFields.
• Set a clear authoring label with displayName.
• Choose a reading direction with layout ("vertical" for sequential flows; "horizontal" for short parallel groups).
• Longer Forms:
• Break long forms into steps or sections to avoid overwhelming users. (See "Tabs Form")
• Interactive Forms:
• Allow users to dynamically add segments (e.g., add task, add incident, add note, add attachment) depending on scenario. (See "Tabs Form")

Sizing & Layout

• Control outer spacing with paddingClass and intra-field rhythm with gapClass (use both row and column gaps).
• Align content consistently via alignItemsClass (vertical) and justifyContentClass (horizontal).
• Pair a baseline defaultHeight with canGrow/canShrink so the form adapts to content without overflow.

...