Select¶

Select inputs are fields that allow users to choose options from a menu.

Usage¶

Element offers two distinct select input types: the Default Select and the Advanced Select.

The default select is based on the native HTML select element. Use it for straightforward scenarios where users need to select a single option from a dropdown list.

The advanced select is designed to accommodate more complex requirements, offering support for single-selection, multi-selection, icons, and a search function. This variant should be employed only when one or more of the mentioned capabilities are necessary.

Select input field

When to use¶

When users need to make a choice among a list of options.
When there are more than 5 options to choose from.
When options can be logically grouped (e.g., countries, cities, etc.).
Use it in forms and for atribute selection.

Best practices¶

Don't use it if there are less than three options available for selection.
Analyze what actions will save more time for the user (e.g. selecting an item versus typing that item).
If possible, mark the default option as the recommended one (avoid extra clicking).

Code¶

References¶

Bootstrap: Select

Example¶

si-select component¶

Element also offers a custom select component called si-select. The si-select component provide the following abilities:

specify the icon for each specified option.
disable options
single / multi-select behavior
custom option input
option groups
customizable rendering of options
option filtering
customizable footer with actions

The component should only be used if you require one of the listed abilities. Otherwise the native select input with Bootstrap markup is preferred.

Usage¶

si-select can be imported using the module

import { SiSelectModule } from '@siemens/element-ng/select';

@NgModule({
  imports: [SiSelectModule, ...]
})

or as a standalone component:

import {
  SiSelectComponent,
  SiSelectSimpleOptionsDirective, // At least one option directive is required. Unused option types can be omitted.
  SiSelectSingleValueDirective, // At least one value directive is required. Unused value types can be omitted.
  SiSelectMultiValueDirective
} from '@siemens/element-ng/select';

@Component({
  imports: [
    SiSelectComponent,
    SiSelectSimpleOptionsDirective,
    SiSelectSingleValueDirective,
    SiSelectMultiValueDirective,
  ]
})

Options¶

Options are provided as an array of SelectItem<T> objects:

<si-select
  [options]="[
    {
      type: 'option',
      value: { id: id, myProperty: myValue },
      label: 'Label',
      disabled: false,
      icon: 'element-face-happy',
      iconColor: 'status-success'
    }
  ]"
/>

Customize option rendering using a template:

<si-select
  [options]="[
    { type: 'option', value: 'good', label: 'Good' },
    { type: 'option', value: 'fair', label: 'Fair' },
    { type: 'option', value: 'bad', label: 'Bad' }
  ]"
>
  <ng-template let-option siSelectOptionTemplate>{{ option.label | uppercase }}</ng-template>
</si-select>

Wrap options in groups:

<si-select
  [options]="[
    {
      type: 'group',
      label: 'Group',
      options: [{ type: 'option', label: 'Option', value: 'value' }]
    }
  ]"
>
  <!-- Optional group template -->
  <ng-template let-group siSelectGroupTemplate>{{ group.label | uppercase }}</ng-template>
</si-select>

Lazy options¶

Instead of providing eagerly loaded options, applications can provide an [optionSource]. The option source allows lazy loading of options. It can be used with or without filtering.

To use the [optionSource] applications must implement the SelectOptionSource interface:

// This provides options which value are of type MyValue.
// For async methods the si-select will show a loading spinner until the observable emits the first time.
// Always return options in a consistent order.
export class MyOptionSource implements SelectOptionSource<MyValue> {

  getOptionsForValues(values: MyValue[]): Observable<SelectOptionNext<MyValue>[]> {
    // si-select will call this function when it needs to get options for the provided values.
    // This function is typically called when the value is set via a formControl or ngModel.
    // Lookup the values on your server and return the corresponding options.
  }

  getAllOptions?(): Observable<SelectItem<MyValue>[]> {
    // This function is optional, if filtering is enabled.
    // The options returned by this function are shown in the dropdown when no search value is provided.
    // You can return all available options or just a subset of the most common options.
    // If this function is not implemented only the selected options are shown.
  }

  getOptionsForSearch?(search: MyValue): Observable<SelectItem<MyValue>[]> {
    // This function is required if filtering is enabled.
    // It is never called with an empty search value.
    // Return all options that matches the search value.
  }

  compareOptions?(a: SelectOptionNext<MyValue>, b: SelectOptionNext<MyValue>): number {
    // This function is optional.
    // If provided it is used to compare options for sorting.
    // This ensures a correct order if options are loaded from the cache.
  }

  optionsEqual?(optionA: MyValue, optionB: MyValue): boolean {
    // By default si-select checks values on equality by reference.
    // If you use objects as values override this method so that equal values are recognized as such.
    // For primitiv values like strings this method should be omitted.
  }
}

Then use this source in your component:

import { SiSelectComponent, SiSelectSingleValueDirective, SiSelectLazyOptionsDirective } from '@siemens/element-ng/select';

@Component({
  selector: 'app-sample',
  template: '<si-select [optionSource]="myOptionSource" [formControl]="control" />',
  standalone: true,
  imports: [SiSelectComponent, SiSelectSingleValueDirective, SiSelectLazyOptionsDirective]
})
export class SampleComponent {
  myOptionSource = new MyOptionSource();
  control = new FormControl<MyValue | null>(null);
}

Selection¶

Single selection:

@Component({
  standalone: true,
  selector: 'app-sample',
  imports: [SiSelectComponent, SiSelectSimpleOptionsDirective, SiSelectSingleValueDirective],
  template: '<si-select [options]="optionsList" [(value)]="selected" />'
})
export class SampleComponent {
  optionsList: SelectItem<string>[] = [
    {
      type: 'option',
      value: 'good',
      label: 'Good'
    },
    {
      type: 'option',
      value: 'fair',
      label: 'Fair'
    }
  ];
  selected = 'good';
}

Multi selection:

@Component({
  standalone: true,
  selector: 'app-sample',
  imports: [SiSelectComponent, SiSelectSimpleOptionsDirective, SiSelectMultiValueDirective],
  template: '<si-select multi [options]="optionsList" [(value)]="multiValue" />'
})
export class SampleComponent {
  optionsList: SelectItem<string>[] = [
    { type: 'option', value: 'good', label: 'Good' },
    { type: 'option', value: 'fair', label: 'Fair' }
  ];
  multiValue = ['good', 'fair'];
}

Filtering options¶

Add the attribute hasFilter to enable an input element for option filtering in the overlay of the si-select component. If a custom template is used, a value provider is required.

<si-select hasFilter [options]="[...]" />

By using the siSelectActions directive, you can add custom actions to the footer of the si-select component.

To align the styling to the design system specification it is necessary that actions:

apply the siSelectAction directive to each item
and footer buttons shall apply the following classes btn btn-link.

<si-select [options]="[{ id: 'option1', title: 'Option 1' }, { id: 'option2', title: 'Option 2' }]" >
  <ng-template siSelectActions>
    <button siSelectAction type="button" class="btn btn-link" aria-label="Action 1">Action 1</button>
    <button siSelectAction type="button" class="btn btn-link" aria-label="Action 2">Action 2</button>
  </ng-template>
</si-select>

In some scenarios it is necessary to close the dropdown on click for example to display a modal dialog. The siSelectActions directive offers an input selectActionAutoClose for this purpose.

The following demonstrates how to add a "Create" button within the dropdown actions that, when clicked, will close the dropdown:

<si-select [options]="[{ id: 'option1', title: 'Option 1' }, { id: 'option2', title: 'Option 2' }]" >
  <ng-template siSelectActions>
    <button 
      siSelectAction 
      selectActionAutoClose
      type="button"
      class="btn btn-link" 
      (click)="....">
      Create
    </button>
  </ng-template>
</si-select>

SiSelectComponent API Documentation¶

selector

si-select

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.

Input Properties¶

Name	Type	Default	Description
ariaLabel ¶	(`null` \| `string`)	`null`	Aria label of the select.
errormessageId ¶	`string`	`${this.id()}-errormessage`	This ID will be bound to the `aria-describedby` attribute of the select. Use this to reference the element containing the error message(s) for the select. It will be picked by the SiFormItemComponent if the select is used inside a form item.
filterPlaceholder ¶	`TranslatableString`	$localize`:@@SI_SELECT.SEARCH-PLACEHOLDER:Search...`	Placeholder for search input field.
hasFilter ¶	`boolean`	`false`	Enables the filter input
id ¶	`string`	`__si-select-${SiSelectComponent.idCounter++}`	Unique identifier.
labelledby ¶	`string`	`undefined`	Aria labelledby of the select.
noResultsFoundLabel ¶	`TranslatableString`	$localize`:@@SI_SELECT.NO-RESULTS-FOUND:No results found`	Label if no item can be found.
placeholder ¶	`TranslatableString`		Placeholder text to display when no options are selected.
readonly ¶	`boolean`	`false`	Readonly state. Similar to disabled but with higher contrast *

Output Properties¶

Name	Type	Description
openChange ¶	`boolean`	Emits when the dropdown open state changes.
dropdownClose ¶	`void`	Emits on selection dropdown close. Deprecated: Use openChange instead.

Attributes and Methods¶

Name	Type	Default	Description
close() ¶	() => `void`		Closes the `si-select` .
open() ¶	() => `void`		Opens the `si-select` .

Simple options (via SiSelectSimpleOptionsDirective)¶

selector

si-select[options]

This directive allows passing SelectItem to the SiSelectComponent .

Example:

<si-select [options]="[{ type: 'option', value: 'one', label: 'One' }, { type: 'option', value: 'two', label: 'Two' }]"></si-select>
<si-select [options]="[{ type: 'group', label: 'Group', options [{ type: 'option', value: 1, label: 'One' }, { type: 'option', value: 2, label: 'Two' }] }]"></si-select>

Input Properties¶

Name	Type	Default	Description
optionEqualCheckFn ¶	(a: `T`, b: `T`) => `boolean`	`(a: T, b: T): boolean => a === b`	By default, values are check on referential equality. Provide a function to customize the behavior.
options ¶	(`null` \| (`SelectOptionLegacy` \| `SelectItem`<`T`>)[])		Options to be shown in select dropdown

Attributes and Methods¶

Name	Type	Default	Description
(readonly) allRows ¶	`Signal`<`SelectItem`<`T`>[]>	`[]`	All group and option items in the dropdown.
onFilter(...) ¶	(filterValue: `string`) => `void`		This function is called when a user enters a filter query. It is expected that an implementation will update the `rows` based on the query. Parameters filterValue: `string`
onValueChange(...) ¶	(value: `T`[]) => `void`		Is always called when the value changes. The implementation must update selectedRows when called. Parameters value: `T`[] currently selected value of the related si-select.
(readonly) rows ¶	`WritableSignal`<`SelectItem`<`T`>[]>	`[]`	Rows that should be shown.
(readonly) selectedRows ¶	`Signal`<`SelectOption`<`T`>[]>	...	List of all options that are currently selected. Must be updated when onValueChange is called.

Complex options (via SiSelectComplexOptionsDirective)¶

selector

si-select[complexOptions]

The directive allows passing custom options. Otherwise, use the SiSelectSimpleOptionsDirective directive.

Deprecated: Use SiSelectSimpleOptionsDirective instead.

Example:

<si-select [complexOptions]="['v1', 'v2', 'v3']"></si-select>
<si-select [complexOptions]="{ g1: ['g1.i1', 'g1.i2'], g2: ['g2.i1']}"></si-select>

Input Properties¶

Name	Type	Default	Description
complexOptions ¶	(`null` \| `T`[] \| `Record`<`string`, `T`[]>)		Options to be shown in select dropdown.
disabledProvider ¶	(dropdownOption: `T`) => `boolean`	`() => false`	The disabledProvider is used to display menu items as disabled.
groupProvider ¶	(groupKey: `string`) => (`undefined` \| `string`)	`() => undefined`	Provides Value for the display text of the dropdown group
optionEqualCheckFn ¶	(a: `T`, b: `T`) => `boolean`	`(a: T, b: T): boolean => a === b`	By default, values are check on equality by reference. Override to customize the behavior.
valueProvider ¶	(dropdownOption: `T`) => (`undefined` \| `string`)		The valueProvider is used to extract the display text of a value.
trackBy ¶	`TrackByFunction`<`T`>	`buildTrackByIdentity<T>()`	Deprecated: Property has no effect and can be removed.

Attributes and Methods¶

Name	Type	Default	Description
(readonly) allRows ¶	`Signal`<(`SelectOption`<`T`>[] \| `SelectGroup`<`T`>[])>	`[]`	All group and option items in the dropdown.
onFilter(...) ¶	(filterValue: `string`) => `void`		This function is called when a user enters a filter query. It is expected that an implementation will update the `rows` based on the query. Parameters filterValue: `string`
onValueChange(...) ¶	(value: `T`[]) => `void`		Is always called when the value changes. The implementation must update selectedRows when called. Parameters value: `T`[] currently selected value of the related si-select.
(readonly) rows ¶	`WritableSignal`<`SelectItem`<`T`>[]>	`[]`	Rows that should be shown.
(readonly) selectedRows ¶	`Signal`<`SelectOption`<`T`>[]>	...	List of all options that are currently selected. Must be updated when onValueChange is called.

Types Documentation¶

SI_FORM_ITEM_CONTROL `InjectionToken`<`SiFormItemControl`> = ...¶ Variable

TranslatableString (`string` & `Translatable`)¶ Type alias 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.

SiFormItemControl

¶

Interface

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. This property will be required with v48. errormessageId?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
The actual id of the control that should be used in the `for` attribute of a label. id?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
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?: (`null` \| `string` \| `Signal`<(`undefined` \| `string`)>)¶

Translatable ¶ import imported from @siemens/element-translate-ng

SiFormError

¶

Interface

Properties
key: `string`¶
message?: `TranslatableString`¶
params: `any`¶

SiFormValidationErrorMapper

¶

Interface

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 ]: (undefined | string | (error: any) => string)¶

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`)¶

SelectItem <T> (`SelectGroup`<`T`> \| `SelectOption`<`T`>)¶ Type alias Alias for SelectOption or SelectGroup

SelectGroup

<T>¶

Interface

A select option group

Properties
An optional key to identify this group in a custom template. key?: `string`¶
A label to be shown as header for this group. Is optional if a custom template is provided. label?: `TranslatableString`¶
All options that are part of this group. options: `SelectOption`<`T`>[]¶
Defines this to be a group. type: `"group"`¶

SelectOption

<T>¶

Interface

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`¶

Breakpoints

¶

Interface

Properties
lgMinimum: `number`¶
mdMinimum: `number`¶
smMinimum: `number`¶
xlMinimum: `number`¶
xxlMinimum: `number`¶

~~SelectOptionLegacy~~

¶

Interface

Deprecated: Use SelectOption instead.

Properties
Optional color class for the icon color?: `string`¶
Is the option disabled? disabled?: `boolean`¶
Optional icon to display icon?: `string`¶
Identifies the option, will be used as `value` for the component id: `string`¶
Title to display title: `TranslatableString`¶
Defines this to be the deprecated option. type?: `undefined`¶

SiFormItemComponent

implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy¶

Class

▶

Constructor
() => `{}`¶

Properties
container: (`null` \| `SiFormContainerComponent`<{ [ key: `string` ]: `AbstractControl`<`any`, `any`> } }>) = ...¶
controlElementRef: `Signal`<(`undefined` \| `ElementRef`<`HTMLElement`>)> = ...¶
Disables the automatic error printing. Error printing will be enabled by default in v46. disableErrorPrinting: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
errors: `WritableSignal`<`SiFormError`[]> = ...¶
fieldControl: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlNative: `WritableSignal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlQuery: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldset: (`null` \| `SiFormFieldsetComponent`) = ...¶
formErrorMapper: `InputSignal`<(`undefined` \| `SiFormValidationErrorMapper`)> = ...¶
hasRequiredValidator: `WritableSignal`<`boolean`> = ...¶
The label to be displayed in the form item. It will be translated if a translation key is available. label: `InputSignal`<(`undefined` \| `null` \| `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`<(`undefined` \| `string` \| `number`)> = ...¶
labelWidthCssVar: `Signal`<(`undefined` \| `string`)> = ...¶
ngControl: `Signal`<(`undefined` \| `NgControl`)> = ...¶
previousErrors?: (`null` \| `ValidationErrors`)¶
printErrors: `Signal`<`boolean`> = ...¶
required: `Signal`<`boolean`> = ...¶
Defines that this form item is required for the overall form to be valid. requiredInput: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
requiredTestControl: `FormControl`<(`null` \| `string`)> = ...¶
requiredValidator: `Signal`<(`undefined` \| `RequiredValidator`)> = ...¶
validationErrorService: `SiFormValidationErrorService` = ...¶
validator?: (`null` \| `ValidatorFn`)¶

Accessors
get formItemErrormessageId: (`null` \| `string`)¶
get formItemId: (`null` \| `string`)¶
get formItemLabelledBy: (`null` \| `string`)¶

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¶

ngOnChanges

(changes: SimpleChanges) => 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: `SimpleChanges`¶

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¶

SiFormContainerComponent

<(TControl: { [ K in keyof TControl ]: AbstractControl })>¶

Class

▶

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`<(`undefined` \| `Breakpoints`)> = ...¶
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`<(`undefined` \| `SiFormValidationErrorMapper` \| `Map`<`string`, `string`>)> = ...¶
Set the form entity to the container to enable the overall form validation on in the form container edit panel. form: `InputSignal`<(`undefined` \| `FormGroup`<`TControl`>)> = ...¶
formErrorMapper: `Signal`<{ [ key: `string` ]: (`undefined` \| `string` \| (error: `any`) => `string`) } }> = ...¶
hasParentContainer: `boolean` = ...¶
A custom width value to be applied to all labels. Example: `labelWidth="100px".` labelWidth: `InputSignal`<(`undefined` \| `string`)> = ...¶
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

getControlNameTranslateKey

(controlName: string) => (undefined | string)¶

Parameters
controlName: `string`¶

SiFormFieldsetComponent

implements DoCheck¶

Class

▶

Constructor
() => `{}`¶

Properties
errors: `Signal`<`SiFormError`[]> = ...¶
formItems: `WritableSignal`<`SiFormItemComponent`[]> = ...¶
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`<(`undefined` \| `string`)> = ...¶
Adds a required marker to the label required: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
touched: `WritableSignal`<`boolean`> = ...¶
labelIdCounter: `number` = `0`¶

Methods

A callback method that performs change-detection, invoked after the default change-detector runs. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.
ngDoCheck: () => void from DoCheck.ngDoCheck¶

registerFormItem

(item: SiFormItemComponent) => void¶

Parameters
item: `SiFormItemComponent`¶

unregisterFormItem

(item: SiFormItemComponent) => void¶

Parameters
item: `SiFormItemComponent`¶

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

Select¶

Usage¶

When to use¶

Best practices¶

Design¶

Default select¶

Advanced select¶

States¶

Label (optional)¶

Validation¶

Code¶

References¶

Example¶

si-select component¶

Usage¶

Options¶

Lazy options¶

Selection¶

Filtering options¶

Footer actions¶

SiSelectComponent API Documentation¶

Input Properties¶

Output Properties¶

Attributes and Methods¶

Simple options (via SiSelectSimpleOptionsDirective)¶

Input Properties¶

Attributes and Methods¶

Complex options (via SiSelectComplexOptionsDirective)¶

Input Properties¶

Attributes and Methods¶

Types Documentation¶