Page History
(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.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=14847-56066&t=ftfrOGkPzlG2GaTo-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/3-dropdown/multi-combobox
Guidelines
(Technical Details Example)
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
| Prefill common choices to speed completion. | Force users to reselect frequent values each visit. | defaultValue, saveInLocalStorage | |||
| Use dynamic data for long/volatile lists. | Hard-code large or frequently changing lists. | useStaticData: false, dataSourceId, dataSourcePath | |||
| Expose readable labels and stable IDs. | Display raw IDs or ambiguous labels. | modelDisplayValue, modelValue | |||
| Require only when truly needed. | Mark every Multi-Select as required. | validation.required | |||
| Tune list length for scanability. | Dump hundreds of items on one page. | pageSize, loadAll | |||
| Emit full objects when downstream logic needs attributes. | Add extra requests to rehydrate selected IDs. | emitObject: true | |||
| Disable for permission gaps; show selected values. | Hide controls users expect to see with missing feedback. | authorizationDisable, readonly | |||
| Hide the control when it must not appear. | Show a control that isn’t applicable and hope it’s ignored. | hidden: true | |||
| Localize the empty prompt. | Leave an English-only placeholder. | placeholderTranslations | |||
| Wire dependent updates to changes. | Rely on manual refresh after selection. | events.ON_VALUE_CHANGE | Prepare parameters before first render. | Build request parameters lazily after user input. | events.ON_INIT, getEntityCollectionHttpRequestParametersMap |
| Clean up on teardown. | Leave subscriptions or requests hanging. | events.ON_DESTROY | |||
| Align submission location with backend. | Always send values in the body regardless of API contract. | controlsRequestType, dataField |
...
