Skip to main content

Default Inputs

A checkbox input. The default input component for boolean fields.

Signature
class BooleanFormInputComponent implements FormInputComponent {    static readonly id: DefaultFormComponentId = 'boolean-form-input';    readonly: boolean;    formControl: UntypedFormControl;    config: DefaultFormComponentConfig<'boolean-form-input'>;}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'boolean-form-input'>

A JSON editor input with syntax highlighting and error detection. Works well with text type fields.

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, AfterViewInit, OnInit

id

constructor

method(changeDetector: ChangeDetectorRef) => HtmlEditorFormInputComponent

ngOnInit

method() =>

A JSON editor input with syntax highlighting and error detection. Works well with text type fields.

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, AfterViewInit, OnInit

id

constructor

method(changeDetector: ChangeDetectorRef) => JsonEditorFormInputComponent

ngOnInit

method() =>

A special input used to display the "Combination mode" AND/OR toggle.

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<boolean>;    constructor(configurableInputComponent: ConfigurableInputComponent)    ngOnInit() => ;    setCombinationModeAnd() => ;    setCombinationModeOr() => ;}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'combination-mode-form-input'>

selectable$

propertyObservable<boolean>

constructor

method(configurableInputComponent: ConfigurableInputComponent) => CombinationModeFormInputComponent

ngOnInit

method() =>

setCombinationModeAnd

method() =>

setCombinationModeOr

method() =>

An input for monetary values. Should be used with int type fields.

Signature
class CurrencyFormInputComponent implements FormInputComponent {    static readonly id: DefaultFormComponentId = 'currency-form-input';    @Input() readonly: boolean;    formControl: UntypedFormControl;    currencyCode$: Observable<CurrencyCode>;    config: DefaultFormComponentConfig<'currency-form-input'>;    constructor(dataService: DataService)}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

currencyCode$

propertyObservable<CurrencyCode>

config

propertyDefaultFormComponentConfig<'currency-form-input'>

constructor

method(dataService: DataService) => CurrencyFormInputComponent

Allows the selection of a Customer via an autocomplete select input. Should be used with ID type fields which represent Customer IDs.

Signature
class CustomerGroupFormInputComponent implements FormInputComponent, OnInit {    static readonly id: DefaultFormComponentId = 'customer-group-form-input';    @Input() readonly: boolean;    formControl: FormControl<string | { id: string }>;    customerGroups$: Observable<GetCustomerGroupsQuery['customerGroups']['items']>;    config: DefaultFormComponentConfig<'customer-group-form-input'>;    constructor(dataService: DataService)    ngOnInit() => ;    selectGroup(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => ;    compareWith(o1: T, o2: T) => ;}

id

readonly

propertyboolean

formControl

propertyFormControl<string | { id: string }>

customerGroups$

propertyObservable<GetCustomerGroupsQuery['customerGroups']['items']>

config

propertyDefaultFormComponentConfig<'customer-group-form-input'>

constructor

method(dataService: DataService) => CustomerGroupFormInputComponent

ngOnInit

method() =>

selectGroup

method(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) =>

compareWith

method(o1: T, o2: T) =>

Allows selection of a datetime. Default input for datetime type fields.

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}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'date-form-input'>

min

property

max

property

yearRange

property

Allows the selection of multiple FacetValues via an autocomplete select input. Should be used with ID type list fields which represent FacetValue IDs.

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;        }    };}

id

isListInput

property

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyInputComponentConfig

valueTransformFn

property

Displays a number input. Default input for int and float type fields.

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}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'number-form-input'>

prefix

property

suffix

property

min

property

max

property

step

property

Displays a password text input. Should be used with string type fields.

Signature
class PasswordFormInputComponent implements FormInputComponent {    static readonly id: DefaultFormComponentId = 'password-form-input';    readonly: boolean;    formControl: UntypedFormControl;    config: InputComponentConfig;}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyInputComponentConfig

Allows the selection of multiple ProductVariants via an autocomplete select input. Should be used with ID type list fields which represent ProductVariant IDs.

Signature
class ProductSelectorFormInputComponent implements FormInputComponent, OnInit {    static readonly id: DefaultFormComponentId = 'product-selector-form-input';    readonly isListInput = true;    readonly: boolean;    formControl: FormControl<Array<string | { id: string }>>;    config: DefaultFormComponentUiConfig<'product-selector-form-input'>;    selection$: Observable<Array<GetProductVariantQuery['productVariant']>>;    constructor(dataService: DataService)    ngOnInit() => ;    addProductVariant(product: ProductSelectorSearchQuery['search']['items'][number]) => ;    removeProductVariant(id: string) => ;}

id

isListInput

property

readonly

propertyboolean

formControl

propertyFormControl<Array<string | { id: string }>>

config

propertyDefaultFormComponentUiConfig<'product-selector-form-input'>

selection$

propertyObservable<Array<GetProductVariantQuery['productVariant']>>

constructor

method(dataService: DataService) => ProductSelectorFormInputComponent

ngOnInit

method() =>

addProductVariant

method(product: ProductSelectorSearchQuery['search']['items'][number]) =>

removeProductVariant

method(id: string) =>

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.

Signature
class RelationFormInputComponent implements FormInputComponent {    static readonly id: DefaultFormComponentId = 'relation-form-input';    @Input() readonly: boolean;    formControl: UntypedFormControl;    config: RelationCustomFieldConfig;}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyRelationCustomFieldConfig

Uses the RichTextEditorComponent as in input for text type fields.

Signature
class RichTextFormInputComponent implements FormInputComponent {    static readonly id: DefaultFormComponentId = 'rich-text-form-input';    readonly: boolean;    formControl: UntypedFormControl;    config: DefaultFormComponentConfig<'rich-text-form-input'>;}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'rich-text-form-input'>

Uses a select input to allow the selection of a string value. Should be used with string type fields with options.

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<LanguageCode>;    options: void    constructor(dataService: DataService)    ngOnInit() => ;    trackByFn(index: number, item: any) => ;}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'select-form-input'> &#38; CustomFieldConfigFragment

uiLanguage$

propertyObservable<LanguageCode>

options

property

constructor

method(dataService: DataService) => SelectFormInputComponent

ngOnInit

method() =>

trackByFn

method(index: number, item: any) =>

A checkbox input. The default input component for boolean fields.

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<LanguageCode>;    protected structFormGroup = new FormGroup({});    protected fields: Array<{        def: StructCustomFieldFragment['fields'][number];        formControl: FormControl;    }>;    constructor(dataService: DataService)    ngOnInit() => ;    ngOnDestroy() => ;}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'struct-form-input'>

uiLanguage$

propertyObservable<LanguageCode>

structFormGroup

property

fields

propertyArray<{ def: StructCustomFieldFragment['fields'][number]; formControl: FormControl; }>

constructor

method(dataService: DataService) => StructFormInputComponent

ngOnInit

method() =>

ngOnDestroy

method() =>

Uses a regular text form input. This is the default input for string and localeString type fields.

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}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'text-form-input'>

prefix

property

suffix

property

Uses textarea form input. This is the default input for text type fields.

Signature
class TextareaFormInputComponent implements FormInputComponent {    static readonly id: DefaultFormComponentId = 'textarea-form-input';    readonly: boolean;    formControl: UntypedFormControl;    config: DefaultFormComponentConfig<'textarea-form-input'>;    spellcheck: boolean}

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'textarea-form-input'>

spellcheck

propertyboolean
Was this chapter helpful?
Report Issue
Edited Feb 3, 2026·Edit this page