Versions Compared

Old Version 3

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Combobox

...

[!WARNING] This article contains information on the Combobox and Multi Combobox. It therefor might be misleading.

Overview

  • The Dynamic Combobox Component is a form control with a dropdown selection interface.
  • It allows users to select a single value from a list of options.
  • It supports both static data and dynamic data from server endpoints.
  • Features include search, pagination, and customizable display formats.

...

  • The Combobox connects to either static data or external data sources through the Data Management configuration.
  • The structure ensures that the selected value is stored and submitted consistently with other form fields.

Labled ComboboxImage RemovedLabled ComboboxImage Added

(Configured in Genereal Properties)

...

  • validation – Configures validation rules for the combobox, including:
  • required – When set to true, the field must have a selection before the form can be submitted.
  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11523-164008&t=ftfrOGkPzlG2GaTo-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/3-dropdown/multi-combobox

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Use the combobox when a user must choose one value from a list that can be static or API-driven.
  • Provide a default only when it prevents busywork; set defaultValue, and avoid preselecting when an explicit choice is required with validation.required.
  • Let users undo optional selections with a clear affordance by enabling showClearIcon.
  • Persist the selection across sessions only when beneficial by using saveInLocalStorage.
  • Keep option content simple and scannable by ensuring the field mapped to modelDisplayValue contains concise, single-line text; avoid composing multi-line or compound labels inside the list.
  • When “no value” is a valid outcome, include an explicit “None” option in staticData (or via your API), keep validation.required: false, and enable showClearIcon to make reversal easy.

Sizing & Layout

  • Keep visible option text concise and scannable by mapping it to a human-readable field through modelDisplayValue.
  • Order options logically (alphabetical, numerical, or by expected frequency) by pre-ordering staticData or requesting a sort via getEntityCollectionHttpRequestParametersMap on the field shown by modelDisplayValue.

Data-Driven / Conditional Behavior

  • Match data volume to UX: paginate large collections with pageSize, and use loadAll only for small datasets.
  • Provide predictable filtering while typing by aligning searchKey with a user-recognizable field (often the one used by modelDisplayValue).
  • Emit the payload your consumer expects: submit just the key with emitObject: false (using modelValue) or the full object with emitObject: true.
  • For static lists, ensure each option includes fields used by modelValue and modelDisplayValue in staticData.

Content & Localization

  • Provide a clear, localized field label with labelTranslations. Use sentence-style capitalization, avoid colons, and keep labels brief (1–2 words where possible).
  • Help authors find the control during authoring by naming it clearly with displayName.

Dos & Don’ts

DoDon’tArticle setting(s)
Localize the field label for all supported locales and keep it short in sentence-style capitalization.Hardcode the label in one language or add punctuation like colons.labelTranslations
Map option value and label explicitly to the correct fields.Swap value/label and confuse submissions.modelValue, modelDisplayValue
Write option labels as short, parallel phrases and ensure the displayed text comes from a concise field.Mix long sentences, inconsistent parts of speech, or jargon across options.modelDisplayValue, staticData
Include a “None” option when no selection is valid, make the field not required, and allow easy clearing.Force a choice when “no value” is acceptable.staticData, validation.required, showClearIcon
Sort options in a logical, scannable order (e.g., alphabetical) via data order or server sort.Leave options in an arbitrary order that slows scanning.staticData, getEntityCollectionHttpRequestParametersMap
Filter on a field users recognize.Search by an internal ID that users don’t understand.searchKey, modelDisplayValue
Provide a default only when useful.Preselect when an explicit decision is required.defaultValue, validation.required
Persist only when appropriate for the same user/session.Persist sensitive or context-specific choices.saveInLocalStorage
Emit the payload shape your consumer expects.Break integrations by switching payload shapes silently.emitObject, dataField
Initialize deterministically before interaction and clean up on removal.Defer setup until first click or leave dangling listeners.ON_INIT, ON_INIT_BASED_ON_USER_VIEW, ON_DESTROY

Accessibility

  • Provide a localized, explicit label so assistive tech announces the control meaningfully (labelTranslations).
  • Prefer human-readable labels for both display and filtering (modelDisplayValue, searchKey); keep them short and parallel.
  • Prevent non-functional interaction in read-only contexts with readonly.
  • Keep submission semantics unambiguous by mapping value/label correctly (modelValue, modelDisplayValue).
  • Avoid forcing a choice unnecessarily by pairing validation.required appropriately with defaultValue and showClearIcon.
  • Provide an easy way to undo choices for optional fields (showClearIcon).
  • Keep list order predictable by sorting labels (server-side or in data) so screen-reader users can anticipate positions (staticData, getEntityCollectionHttpRequestParametersMap).