*** title: "Default Inputs" generated: true --------------- ## BooleanFormInputComponent A checkbox input. The default input component for `boolean` fields. ```ts title="Signature" class BooleanFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'boolean-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'boolean-form-input'>; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} />
## HtmlEditorFormInputComponent A JSON editor input with syntax highlighting and error detection. Works well with `text` type fields. ```ts title="Signature" class HtmlEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit { static readonly id: DefaultFormComponentId = 'html-editor-form-input'; constructor(changeDetector: ChangeDetectorRef) ngOnInit() => ; } ``` * Extends: BaseCodeEditorFormInputComponent * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent), AfterViewInit, OnInit
### id \DefaultFormComponentId`} /> ### ngOnInit \ `} />
## JsonEditorFormInputComponent A JSON editor input with syntax highlighting and error detection. Works well with `text` type fields. ```ts title="Signature" class JsonEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit { static readonly id: DefaultFormComponentId = 'json-editor-form-input'; constructor(changeDetector: ChangeDetectorRef) ngOnInit() => ; } ``` * Extends: BaseCodeEditorFormInputComponent * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent), AfterViewInit, OnInit
### id \DefaultFormComponentId`} /> ### ngOnInit \ `} />
## CombinationModeFormInputComponent A special input used to display the "Combination mode" AND/OR toggle. ```ts title="Signature" class CombinationModeFormInputComponent implements FormInputComponent, OnInit { static readonly id: DefaultFormComponentId = 'combination-mode-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'combination-mode-form-input'>; selectable$: Observable; constructor(configurableInputComponent: ConfigurableInputComponent) ngOnInit() => ; setCombinationModeAnd() => ; setCombinationModeOr() => ; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent), OnInit
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} /> ### selectable$ \`} /> ### ngOnInit \ `} /> ### setCombinationModeAnd \ `} /> ### setCombinationModeOr \ `} />
## CurrencyFormInputComponent An input for monetary values. Should be used with `int` type fields. ```ts title="Signature" class CurrencyFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'currency-form-input'; @Input() readonly: boolean; formControl: UntypedFormControl; currencyCode$: Observable; config: DefaultFormComponentConfig<'currency-form-input'>; constructor(dataService: DataService) } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### currencyCode$ \CurrencyCode>`} /> ### config \`} />
## CustomerGroupFormInputComponent Allows the selection of a Customer via an autocomplete select input. Should be used with `ID` type fields which represent Customer IDs. ```ts title="Signature" class CustomerGroupFormInputComponent implements FormInputComponent, OnInit { static readonly id: DefaultFormComponentId = 'customer-group-form-input'; @Input() readonly: boolean; formControl: FormControl; customerGroups$: Observable; config: DefaultFormComponentConfig<'customer-group-form-input'>; constructor(dataService: DataService) ngOnInit() => ; selectGroup(group: ItemOf) => ; compareWith(o1: T, o2: T) => ; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent), OnInit
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \`} /> ### customerGroups$ \`} /> ### config \`} /> ### ngOnInit \ `} /> ### selectGroup \) => `} /> ### compareWith \ `} />
## DateFormInputComponent Allows selection of a datetime. Default input for `datetime` type fields. ```ts title="Signature" class DateFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'date-form-input'; @Input() readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'date-form-input'>; min: void max: void yearRange: void } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} /> ### min \ ### max \ ### yearRange \
## FacetValueFormInputComponent Allows the selection of multiple FacetValues via an autocomplete select input. Should be used with `ID` type **list** fields which represent FacetValue IDs. ```ts title="Signature" class FacetValueFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'facet-value-form-input'; readonly isListInput = true; readonly: boolean; formControl: UntypedFormControl; config: InputComponentConfig; valueTransformFn = (values: FacetValueFragment[]) => { const isUsedInConfigArg = this.config.__typename === 'ConfigArgDefinition'; if (isUsedInConfigArg) { return JSON.stringify(values.map(s => s.id)); } else { return values; } }; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### isListInput \ ### readonly \ ### formControl \ ### config \ ### valueTransformFn \
## NumberFormInputComponent Displays a number input. Default input for `int` and `float` type fields. ```ts title="Signature" class NumberFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'number-form-input'; @Input() readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'number-form-input'>; prefix: void suffix: void min: void max: void step: void } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} /> ### prefix \ ### suffix \ ### min \ ### max \ ### step \
## PasswordFormInputComponent Displays a password text input. Should be used with `string` type fields. ```ts title="Signature" class PasswordFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'password-form-input'; readonly: boolean; formControl: UntypedFormControl; config: InputComponentConfig; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \
## ProductSelectorFormInputComponent Allows the selection of multiple ProductVariants via an autocomplete select input. Should be used with `ID` type **list** fields which represent ProductVariant IDs. ```ts title="Signature" class ProductSelectorFormInputComponent implements FormInputComponent, OnInit { static readonly id: DefaultFormComponentId = 'product-selector-form-input'; readonly isListInput = true; readonly: boolean; formControl: FormControl>; config: DefaultFormComponentUiConfig<'product-selector-form-input'>; selection$: Observable>; constructor(dataService: DataService) ngOnInit() => ; addProductVariant(product: ProductSelectorSearchQuery['search']['items'][number]) => ; removeProductVariant(id: string) => ; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent), OnInit
### id \DefaultFormComponentId`} /> ### isListInput \ ### readonly \ ### formControl \>`} /> ### config \`} /> ### selection$ \>`} /> ### ngOnInit \ `} /> ### addProductVariant \ `} /> ### removeProductVariant \ `} />
## RelationFormInputComponent The default input component for `relation` type custom fields. Allows the selection of a ProductVariant, Product, Customer or Asset. For other entity types, a custom implementation will need to be defined. See [registerFormInputComponent](/current/core/reference/admin-ui-api/custom-input-components/register-form-input-component#registerforminputcomponent). ```ts title="Signature" class RelationFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'relation-form-input'; @Input() readonly: boolean; formControl: UntypedFormControl; config: RelationCustomFieldConfig; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \
## RichTextFormInputComponent Uses the [RichTextEditorComponent](/current/core/reference/admin-ui-api/components/rich-text-editor-component#richtexteditorcomponent) as in input for `text` type fields. ```ts title="Signature" class RichTextFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'rich-text-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'rich-text-form-input'>; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} />
## SelectFormInputComponent Uses a select input to allow the selection of a string value. Should be used with `string` type fields with options. ```ts title="Signature" class SelectFormInputComponent implements FormInputComponent, OnInit { static readonly id: DefaultFormComponentId = 'select-form-input'; @Input() readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment; uiLanguage$: Observable; options: void constructor(dataService: DataService) ngOnInit() => ; trackByFn(index: number, item: any) => ; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent), OnInit
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \ & CustomFieldConfigFragment`} /> ### uiLanguage$ \LanguageCode>`} /> ### options \ ### ngOnInit \ `} /> ### trackByFn \ `} />
## StructFormInputComponent A checkbox input. The default input component for `boolean` fields. ```ts title="Signature" class StructFormInputComponent implements FormInputComponent, OnInit, OnDestroy { static readonly id: DefaultFormComponentId = 'struct-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'struct-form-input'>; uiLanguage$: Observable; protected structFormGroup = new FormGroup({}); protected fields: Array<{ def: StructCustomFieldFragment['fields'][number]; formControl: FormControl; }>; constructor(dataService: DataService) ngOnInit() => ; ngOnDestroy() => ; } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent), OnInit, OnDestroy
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} /> ### uiLanguage$ \LanguageCode>`} /> ### structFormGroup \ ### fields \`} /> ### ngOnInit \ `} /> ### ngOnDestroy \ `} />
## TextFormInputComponent Uses a regular text form input. This is the default input for `string` and `localeString` type fields. ```ts title="Signature" class TextFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'text-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'text-form-input'>; prefix: void suffix: void } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} /> ### prefix \ ### suffix \
## TextareaFormInputComponent Uses textarea form input. This is the default input for `text` type fields. ```ts title="Signature" class TextareaFormInputComponent implements FormInputComponent { static readonly id: DefaultFormComponentId = 'textarea-form-input'; readonly: boolean; formControl: UntypedFormControl; config: DefaultFormComponentConfig<'textarea-form-input'>; spellcheck: boolean } ``` * Implements: [`FormInputComponent`](/current/core/reference/admin-ui-api/custom-input-components/form-input-component#forminputcomponent)
### id \DefaultFormComponentId`} /> ### readonly \ ### formControl \ ### config \`} /> ### spellcheck \