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

Multi-Select

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

Overview

• The Multi-Select component is a form control that lets users choose multiple values from a dropdown list.
• It supports configuration for data sources, appearance, and behavior.
• It is useful when users need to select multiple items, such as tags, categories, or related elements.
• The component can handle large datasets through static lists or API integration.

...

• validation - Configures validation rules for the multi-select control, including:
• required - When set to true, at least one option must be selected before the form can be submitted. This ensures users make a selection when the information is essential.

Guidelines

...

...

(Technical Details Example)

{ 
  "content": [ 
    { "id": "1", "name": "Option 1" }, 
    { "id": "2", "name": "Option 2" } 
  ], 
  "totalElements": 100, 
  "totalPages": 10, 
  "number": 0, 
  "size": 10, 
  "first": true, 
  "last": false, 
  "empty": false 
}

Usage

• Use Multi-Select when users must pick multiple values; prefill via defaultValue and persist via saveInLocalStorage.
• Prefer dynamic data for long/volatile lists: useStaticData: false with dataSourceId/dataSourcePath. Use useStaticData: true with staticData for short, stable lists.
• Map readable labels and stable IDs with modelDisplayValue (label) and modelValue (submitted value).
• Make the field required only when necessary using validation.required.
• Tooltips may be used for added explanation but must stay concise and never carry essential information.

Sizing & Layout

• Keep lists scannable by tuning pageSize; for small datasets, simplify with loadAll: true.
• Maintain 24px spacing around form controls, and 8px spacing when fields are placed next to each other.
• Use sublines to separate input groups, with optional explanatory text below.

States & Feedback

• Present a non-editable summary with readonly: true.
• Initialize predictable selections with defaultValue; react to edits using events.ON_VALUE_CHANGE.
• Show validation errors inline with clear, actionable messages.

Visibility & Authorization

• Gate editability using authorizationDisable when users may see but not change selections.
• Remove the control entirely when inapplicable with hidden: true.

Content & Localization

• Provide a concise, localized prompt using placeholderTranslations.
• For static lists, localize option text values in staticData.

Dos & Don’ts

Accessibility

...

• Labels must be short (1–2 words) and never include colons.
• Provide help text below the form title for guidance; it must always remain visible.
• Provide a localized, descriptive empty-state prompt via placeholderTranslations.
• Ensure understandable options with modelDisplayValue (human-readable label) and stable submissions with modelValue.
• Use readonly to clearly communicate non-editable state without misleading interaction affordances.
• Avoid color-only meaning; rely on clear labels surfaced through modelDisplayValue.
• Keep option text concise and specific to reduce navigation effort in large lists (complemented by pageSize/loadAll configuration handled in Guidelines).