Versions Compared

Old Version 3

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

Saved on

compared with

New Version 4

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)

Single Select

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

Overview

  • The Single Select component is a dropdown form control.
  • It allows users to select a single option from a list.
  • Options can come from a static list or a dynamic API endpoint.
  • It is useful for forms where one choice must be made, such as categories, statuses, or roles.

...

  • authorizationDisable - Specifies a policy set that determines when the component should be disabled based on user permissions.
  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11528-200611&t=ftfrOGkPzlG2GaTo-1
  • Live sytle guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/3-dropdown/single-dropdown

Guidelines

Usage

  • Use when exactly one value must be selected; enforce completion with required: true.
  • Provide a meaningful, localized prompt by setting placeholderTranslations (e.g., “Select status”).
  • Establish predictable state: set initValue for first render and defaultValue for form resets.
  • Persist a user’s last choice across sessions with saveInLocalStorage when appropriate.

...

DoDon’tArticle setting(s)
Localize a concise prompt like “Select status”.Leave a generic or English-only placeholder.placeholderTranslations
Preselect a safe default on first render.Start with an undefined state that confuses submit rules.initValue
Restore the expected value on form reset.Hack resets outside the component.defaultValue
Disable while options are loading or not allowed.Let users open an empty or nonfunctional dropdown.disabled
Use read-only to show a fixed, non-editable value.Fake read-only by disabling when the value must remain visible.readonly
Show a clear icon only if clearing is valid.Offer “clear” on fields that must never be empty.showClearIcon, required
Use static data for small, stable lists.Call an API for options that never change.useStaticData, staticData
Map value/label fields to your API correctly.Display IDs to users or submit labels instead of IDs.modelValue, modelDisplayValue, dataSourcePath
Page large lists for responsiveness.Fetch every option by default when lists are huge.pageSize, loadAll: false
Include only needed fetch params.Hardcode server-specific params elsewhere.getEntityCollectionHttpRequestParametersMap
Emit the full object when downstream logic needs it.Parse labels later to recover metadata.emitObject
Persist last selection only where it’s helpful.Persist sensitive/temporary selections unnecessarily.saveInLocalStorage
Wire reactions to selection changes.Poll externally for selection state.events.ON_VALUE_CHANGEInitialize and clean up intentionally.Leave listeners or timers after unmount.events.ON_INIT, events.ON_DESTROY

Accessibility

  • Announce meaningful guidance by localizing the placeholder with placeholderTranslations.
  • Communicate availability accurately: use disabled when interaction isn’t allowed; use readonly when the value must remain visible but fixed.
  • Prevent accidental blank submissions by configuring validation with required where a choice is mandatory.
  • Expose an explicit clear affordance only when an empty state is valid using showClearIcon.
  • Respect permission states by disabling the control via authorizationDisable instead of hiding essential information.
  • Display human-readable text by mapping modelDisplayValue to the correct label field.
  • Provide predictable behavior for assistive tech by defining initValue and defaultValue.
  • Reduce cognitive load in long lists by paginating with pageSize and reserving loadAll for short lists.