Skip to content

SiSelectComboboxValueComponent documentation

selector
si-select-combobox-value

Represents a single selected value inside an SiSelectComboboxComponent .

Project one <​si-select-combobox-value​> per selected entry. Optional icon , iconColor , stackedIcon and stackedIconColor inputs mirror the icon API of SelectOption and render an icon (with optional stacked overlay) before the projected content.

Add the comma-separated CSS class to render a comma between adjacent values. Omit it when using chips, custom separators, or a single value.

Example:

<si-select-combobox>
  <si-select-combobox-value
    icon="element-face-happy"
    iconColor="status-success"
  >
    {{ select.value() }}
  </si-select-combobox-value>
</si-select-combobox>

Input Properties

NameTypeDefaultDescription
icon
stringAn optional icon rendered before the projected content.
iconColor
stringOptional CSS color class applied to icon .
stackedIcon
stringOptional secondary icon stacked on top of icon .
stackedIconColor
stringOptional CSS color class applied to stackedIcon .

Types Documentation

<T>
A select option
Properties
Whether this option is disabled.
disabled?: boolean
An optional icon.
icon?: string
The color of an icon.
iconColor?: string
A label to be shown for this option. Is optional if a custom template is provided or if the value should directly be rendered.
label?: TranslatableString
An optional stacked icon.
stackedIcon?: string
The color of a stacked icon.
stackedIconColor?: string
Defines this to be an option.
type: "option"
Used for typeahead functionality when filtering is disabled. If provided, this will be used, otherwise the innerText of the rendered element.
typeaheadLabel?: TranslatableString
The value if this option.
It will be used for formControls and the value property of this si-select .
The value will internally be checked on equality by using === .
So an app should either use string or ensure that same values are referentially equal.
value: T
Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.
Properties
Generated ID that the SiFormItemComponent will assign to the element containing the error messages. Implementations of SiFormItemControl must generate this ID and assign it to the aria-describedby attribute of their focusable elements.
errormessageId: (string | Signal<string>)
The actual id of the control that should be used in the for attribute of a label.
id?: (string | Signal<(string | undefined)>)
If the control is meant to be used a checkbox. This affects the label positioning.
isFormCheck?: boolean
ID that should be assigned to the label element inside the SiFormItemComponent .

If the target control is not of type input, select or button, it cannot be referenced by a label. Instead, aria-labelledby must be used to create a reference to a label. In such a case, an implementation of SiFormItemControl must provide the id of the label in labelledby . SiFormItemComponent will apply the id to the label so that it can be used inside the control to reference it in the aria-labelledby attribute.
labelledby?: (string | Signal<(string | undefined)> | null)
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
("false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog")
Possible values for the aria-haspopup attribute exposed by the combobox host of a custom select.
InjectionToken<SiFormItemControl> = ...
Variable
Properties
key: string
message?: TranslatableString
params: any
Interface for form error mapper. It resolves a key to either a translatable string or function which is called with the validation error for its key and should return a translatable string.
Index signature: [ key: string ]: (string | (error: any) => string | undefined)
Properties
dateFormat?: (TranslatableString | (error: { format: string }) => TranslatableString)
email?: (TranslatableString | (error: { email: boolean }) => TranslatableString)
max?: (TranslatableString | (error: { actual: number, max: number }) => TranslatableString)
maxDate?: (TranslatableString | (error: { actual: Date, max: Date }) => TranslatableString)
maxLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
min?: (TranslatableString | (error: { actual: number, min: number }) => TranslatableString)
minDate?: (TranslatableString | (error: { actual: Date, min: Date }) => TranslatableString)
minLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
numberFormat?: (TranslatableString | (error: { numberFormat: boolean }) => TranslatableString)
pattern?: (TranslatableString | (error: { pattern: (string | RegExp) }) => TranslatableString)
required?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
requiredTrue?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
(mapper: SiFormValidationErrorMapper) => Provider
Function
The error mapper is used to resolve an angular validation error to a TranslatableString . It will be merged with already existing error mappers.
Parameters
mapper: SiFormValidationErrorMapper

Properties
lgMinimum: number
mdMinimum: number
smMinimum: number
xlMinimum: number
xxlMinimum: number
Visual trigger element for custom selects built with SiCustomSelectDirective . Renders the projected content and a dropdown caret icon.

The ARIA role, focus handling, and state attributes live on the host component via SiCustomSelectDirective — this component is purely visual.

Example:
<si-select-combobox>
  {{ select.value() }}
</si-select-combobox>
Constructor
() => {}
Properties
customSelect: SiCustomSelectDirective<any> = ...
icons: Record<"elementDown2", string> = ...
<T> implements ControlValueAccessor, SiFormItemControl
Host directive for building custom selects.

Add this as a hostDirective on your component and expose the inputs/outputs you need. The directive handles: - ControlValueAccessor: ControlValueAccessor integration ( formControl , ngModel , [(value)] ) - Disabled / readonly state management - Overlay lifecycle for the dropdown (open/close) - Focus management and focus trapping in the dropdown - Opening the dropdown on click, Enter, Space, ArrowDown, ArrowUp - SiFormItemControl integration

Use SiSelectDropdownDirective to mark the dropdown template in your component, and call open , close , updateValue from your component logic.

Example:
@Component({
  selector: 'app-my-select',
  hostDirectives: [{
    directive: SiCustomSelectDirective,
    inputs: ['disabled', 'readonly', 'value'],
    outputs: ['valueChange']
  }],
  template: `
    <si-select-combobox>
      {{ select.value() }}
    </si-select-combobox>
    <ng-template si-select-dropdown contentType="listbox">
      <button (click)="select.updateValue('new'); select.close()">Pick</button>
    </ng-template>
  `
})
export class MySelectComponent {
  readonly select = inject(SiCustomSelectDirective);
}
Constructor
() => {}
Properties
closeOverlay$: Subject<void> = ...
comboboxLabelId: Signal<string> = ...
destroyRef: DestroyRef = ...
Combined disabled state from input and form control.
disabled: Signal<boolean> = ...
disabledByForm: WritableSignal<boolean> = ...
Whether the select input is disabled.
disabledInput: InputSignalWithTransform<boolean, unknown> = false
dropdownDirective: WritableSignal<(SiSelectDropdownDirective | undefined)> = ...
dropdownId: Signal<string> = ...
elementRef: ElementRef<HTMLElement> = ...
This ID will be bound to the aria-describedby attribute of the select.
errormessageId: InputSignal<string> implements errormessageId = ${this.id()}-errormessage
focusTrap?: ConfigurableFocusTrap
focusTrapFactory: ConfigurableFocusTrapFactory = ...
Value forwarded to the aria-haspopup attribute. Reflects the contentType input of the registered SiSelectDropdownDirective , defaulting to 'listbox' until a dropdown template is registered.
haspopup: Signal<SiSelectDropdownContentType> = ...
Unique identifier.
id: InputSignal<string> implements id = __si-custom-select-${SiCustomSelectDirective.idCounter++}
isBrowser: boolean = ...
Whether the dropdown is currently open.
isOpen: WritableSignal<boolean> = false
labelledby: Signal<string> implements labelledby = ...
onChange: (_: (T | undefined)) => void = ...
onTouched: () => void = ...
Emits when the dropdown open state changes.
openChange: OutputEmitterRef<boolean> = ...
overlay: Overlay = ...
overlayRef?: OverlayRef
Readonly state. Similar to disabled but with higher contrast.
readonly: InputSignalWithTransform<boolean, unknown> = false
Optional CDK scroll strategy used for the custom select overlay.
scrollStrategy: InputSignal<ScrollStrategy> = defaultConnectedOverlayScrollStrategy()
The current value, supports two-way binding via [(value)] .
value: ModelSignal<(T | undefined)> = undefined
viewContainerRef: ViewContainerRef = ...
idCounter: number = 0
Methods
Closes the dropdown overlay and restores focus.
close: () => void
disposeOverlay: () => void
(event: Event) => void
Opens the dropdown overlay.
Parameters
event?: Event
(directive: SiSelectDropdownDirective) => void
Registers the dropdown directive. Called by SiSelectDropdownDirective when it is initialized.
Parameters
directive: SiSelectDropdownDirective
(fn: (_: (T | undefined)) => void) => void from ControlValueAccessor.registerOnChange
Parameters
fn: (_: (T | undefined)) => void
(fn: () => void) => void from ControlValueAccessor.registerOnTouched
Parameters
fn: () => void
(isDisabled: boolean) => void from ControlValueAccessor.setDisabledState
Parameters
isDisabled: boolean
(value: (T | undefined)) => void
Updates the value programmatically. Call this from your dropdown template to set the new value.
Parameters
value: (T | undefined)
(obj: (T | null)) => void from ControlValueAccessor.writeValue
Parameters
obj: (T | null)
Structural directive marking the dropdown template for custom selects built with SiCustomSelectDirective .

When placed on an <​ng-template​> , it automatically registers the template with the parent SiCustomSelectDirective .

Example:
<ng-template si-select-dropdown contentType="listbox">
  <!-- custom dropdown content -->
</ng-template>
Constructor
() => {}
Properties
Describes the kind of content rendered by the dropdown. The value is forwarded to the aria-haspopup attribute of the combobox host of the parent SiCustomSelectDirective .
contentType: InputSignal<SiSelectDropdownContentType> = ...
templateRef: TemplateRef<void> = ...
implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy, SiFormFieldsetControl
Constructor
() => {}
Properties
container: (SiFormContainerComponent<{ [ key: string ]: AbstractControl<any, any, any> } }> | null) = ...
control: Signal<(AbstractControl<any, any, any> | null | undefined)> implements SiFormFieldsetControl.control = ...
controlElementRef: Signal<(ElementRef<HTMLElement> | undefined)> = ...
Disables the automatic error printing. Error printing will be enabled by default in v46.
disableErrorPrinting: InputSignalWithTransform<boolean, unknown> = false
errors: WritableSignal<SiFormError[]> implements SiFormFieldsetControl.errors = ...
fieldControl: Signal<(SiFormItemControl | undefined)> = ...
fieldControlNative: WritableSignal<(SiFormItemControl | undefined)> = ...
fieldControlQuery: Signal<(SiFormItemControl | undefined)> = ...
fieldset: (SiFormFieldsetComponent | null) = ...
Maps validation errors of the contained control to custom messages.
formErrorMapper: InputSignal<(SiFormValidationErrorMapper | undefined)> = ...
hasRequiredValidator: WritableSignal<boolean> = ...
The label to be displayed in the form item. It will be translated if a translation key is available.
label: InputSignal<TranslatableString> = ...
A custom width value to be applied to the label. A value of 0 is allowed as well to visually hide away the label area.

Numbers will be converted to pixels. Using numbers is discouraged and might be dropped.

Example:
labelWidth="100px"
labelWidth: InputSignal<(string | number | undefined)> = ...
labelWidthCssVar: Signal<(string | undefined)> = ...
ngControl: Signal<(NgControl | undefined)> = ...
previousErrors?: (ValidationErrors | null)
printErrors: Signal<boolean> = ...
radioGroupName: Signal<(string | undefined)> implements SiFormFieldsetControl.radioGroupName = ...
required: Signal<boolean> implements SiFormFieldsetControl.required = ...
Defines that this form item is required for the overall form to be valid.
requiredInput: InputSignalWithTransform<boolean, unknown> = false
requiredTestControl: FormControl<(string | null)> = ...
requiredValidator: Signal<(RequiredValidator | undefined)> = ...
touched: WritableSignal<boolean> implements SiFormFieldsetControl.touched = ...
validationErrorService: SiFormValidationErrorService = ...
validator?: (ValidatorFn | null)
Accessors
get formItemErrormessageId: (string | null)
get formItemId: (string | null)
get formItemLabelledBy: (string | null)
Methods
A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
ngAfterContentChecked: () => void from AfterContentChecked.ngAfterContentChecked
A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit
(changes: { control: SimpleChange<Signal<(AbstractControl<any, any, any> | null | undefined)>>, disableErrorPrinting: false, errors: SimpleChange<WritableSignal<SiFormError[]>>, formErrorMapper: SimpleChange<(SiFormValidationErrorMapper | undefined)>, label: SimpleChange<TranslatableString>, labelWidth: SimpleChange<(string | number | undefined)>, ngAfterContentChecked: SimpleChange<() => void>, ngAfterContentInit: SimpleChange<() => void>, ngControl: SimpleChange<Signal<(NgControl | undefined)>>, ngOnChanges: SimpleChange<(changes: { readonly label?: SimpleChange<TranslatableString> | undefined; readonly labelWidth?: SimpleChange<string | number | undefined> | undefined; ... 13 more ...; ngOnDestroy?: SimpleChange<...> | undefined; }) => void>, ngOnDestroy: SimpleChange<() => void>, ngOnInit: SimpleChange<() => void>, radioGroupName: SimpleChange<Signal<(string | undefined)>>, required: SimpleChange<Signal<boolean>>, requiredInput: false, touched: SimpleChange<WritableSignal<boolean>> }) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: { control: SimpleChange<Signal<(AbstractControl<any, any, any> | null | undefined)>>, disableErrorPrinting: false, errors: SimpleChange<WritableSignal<SiFormError[]>>, formErrorMapper: SimpleChange<(SiFormValidationErrorMapper | undefined)>, label: SimpleChange<TranslatableString>, labelWidth: SimpleChange<(string | number | undefined)>, ngAfterContentChecked: SimpleChange<() => void>, ngAfterContentInit: SimpleChange<() => void>, ngControl: SimpleChange<Signal<(NgControl | undefined)>>, ngOnChanges: SimpleChange<(changes: { readonly label?: SimpleChange<TranslatableString> | undefined; readonly labelWidth?: SimpleChange<string | number | undefined> | undefined; ... 13 more ...; ngOnDestroy?: SimpleChange<...> | undefined; }) => void>, ngOnDestroy: SimpleChange<() => void>, ngOnInit: SimpleChange<() => void>, radioGroupName: SimpleChange<Signal<(string | undefined)>>, required: SimpleChange<Signal<boolean>>, requiredInput: false, touched: SimpleChange<WritableSignal<boolean>> }
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
updateRequiredState: () => void
updateValidationMessages: () => void
<(TControl: { [ K in keyof TControl ]: AbstractControl })>
Deprecated: This component should no longer be used.

When providing a form wide error mapper, use the provideFormValidationErrorMapper . 
import { provideFormValidationErrorMapper } form '@siemens/element-ng/forms'

@Component({
  template: `<form>...</form>`
  providers: [provideFormValidationErrorMapper({
    'name.required': 'CUSTOM_REQUIRED_ERROR'
  })]
})
class MyFormComponent {}


When using the column layout, use the form-col-layout classes.

<!-- Responsive column layout -->
<form class="responsive-form-col-layout">...</form>
<!-- Always column layout -->
<form class="form-col-layout">...</form>


For a custom breakpoint use the SCSS mixin:

scss
@use '@siemens/element-theme/src/styles/bootstrap/mixins/form-layout';

// Custom responsive breakpoint
.custom-form-col-layout {
  // Above 400px the column layout is used
  @include form-layout.responsive-form-col-layout(400px);
}
Constructor
() => {}
Properties
The container hosts the form within a siResizeContainer to configure the breakpoint for different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints input.
contentContainerBreakpoints: InputSignal<(Breakpoints | undefined)> = ...
A map the maps from control names of the form to their translate keys. The initial map is empty and the user is responsible to add the required translate keys.
controlNameTranslateKeyMap: InputSignal<Map<string, string>> = new Map<​string, string​>()
In some scenarios, one may not want the form container to be responsible for the layout relevant si-container-[xs|...] classes, but let this be done by a different, nested component, e.g. by a group box. In these cases, the property should be set to true.
disableContainerBreakpoints: InputSignalWithTransform<boolean, unknown> = false
Disables the automatic error printing in all nested SiFormItemComponent . Error printing will be enabled by default in v46.
disableErrorPrinting: InputSignalWithTransform<boolean, unknown> = false
Every validation error has an errorCode. This map holds translate keys for error codes. The keys can be used to display a translated message for each validation error. The defaults old english readable key defaults for the Angular standard validators of the Validators class like min , max or required .

Use the input to set your own translate keys for the form validators you need.
errorCodeTranslateKeyMap: InputSignal<(SiFormValidationErrorMapper | Map<string, string> | undefined)> = ...
Set the form entity to the container to enable the overall form validation on in the form container edit panel.
form: InputSignal<(FormGroup<TControl> | undefined)> = ...
formErrorMapper: Signal<{ [ key: string ]: (string | (error: any) => string | undefined) } }> = ...
hasParentContainer: boolean = ...
A custom width value to be applied to all labels.

Example:
labelWidth="100px".
labelWidth: InputSignal<(string | undefined)> = ...
A form container in readonly mode is only displaying the form content without ability to change it. The edit panel with typically save and cancel buttons is hidden. Set to true to display the edit panel.
readonly: InputSignalWithTransform<boolean, unknown> = false
Accessors
Indicates whether the content editor message shall be styled as warning.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is invalid.
get invalidFormContainerMessage: boolean
Indicates whether the user interacted with the form.
Returns true , if the user selected at least one form element and [blurred] https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event by losing focus again (e.g. by setting focus on another element), or by editing the content of a form element. Otherwise false .
get userInteractedWithForm: boolean
Indicates whether content editor message shall be styled as success.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is valid.
get validFormContainerMessage: boolean
Methods
(controlName: string) => (string | undefined)
Parameters
controlName: string
Constructor
() => {}
Properties
errors: Signal<readonly SiFormError[]> = ...
formItems: WritableSignal<SiFormFieldsetControl[]> = ...
hasOnlyRadios: Signal<boolean> = ...
Switches all child inputs to inline mode
inline: InputSignalWithTransform<boolean, unknown> = false
isRequired: Signal<boolean> = ...
The label for the entire fieldset.
label: InputSignal<TranslatableString> = ...
labelId: string = ...
Overrides the parent label width.
labelWidth: InputSignal<(string | undefined)> = ...
Adds a required marker to the label
required: InputSignalWithTransform<boolean, unknown> = false
touched: Signal<boolean> = ...
labelIdCounter: number = 0
Methods
(item: SiFormFieldsetControl) => void
Parameters
item: SiFormFieldsetControl
(item: SiFormFieldsetControl) => void
Parameters
item: SiFormFieldsetControl

Except where otherwise noted, content on this site is licensed under MIT License.