(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.

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")

Image Added

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.

States & Feedback

• Error and Validation:
• Errors must be shown inline whenever possible.
• Provide immediate, effective error messages that explain the problem and suggest solutions.
• A form cannot be closed until errors are resolved (primary button should be disabled in error state).
• Server-side validation should be supported with clear inline feedback.

• 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")

Image Removed

Accessibility

...

Data-Driven / Conditional Behavior

• Configure submission deterministically using dataSourceHttpRequestParametersMap; add staticValues and additionalFormFields for always-on metadata.
• Configure entity retrieval via getEntityHttpRequestParametersMap and getEntityDataSourceId.
• Set dataFormat="formdata" for file uploads; prefer "json" for purely textual/numeric payloads.

Dos & Don’ts

Accessibility

• Maintain predictable reading order and grouping via layout, with consistent spacing using gapClass and paddingClass.
• Keep layout stable by combining defaultHeight with canGrow/canShrink.
• Ensure deterministic data operations with explicit mappings for fetch and submit: getEntityDataSourceId, getEntityHttpRequestParametersMap, dataSourceId, dataSourceHttpRequestParametersMap.
• Stage validation: provide live checks during edits (events.ON_VALUES_CHANGE) and block final submission when needed (events.ON_FORM_SUBMIT).
• Keep alignment consistent to aid scanning using alignItemsClass and justifyContentClass.