Skip to main content

Default Inputs

BooleanFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'boolean-form-input'>

HtmlEditorFormInputComponent

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

Signature
  • Extends: BaseCodeEditorFormInputComponent

  • Implements: FormInputComponent, AfterViewInit, OnInit

id

ngOnInit

method() =>

JsonEditorFormInputComponent

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

Signature
  • Extends: BaseCodeEditorFormInputComponent

  • Implements: FormInputComponent, AfterViewInit, OnInit

id

ngOnInit

method() =>

CombinationModeFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

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

selectable$

propertyObservable<boolean>

ngOnInit

method() =>

setCombinationModeAnd

method() =>

setCombinationModeOr

method() =>

CurrencyFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

currencyCode$

propertyObservable<CurrencyCode>

config

propertyDefaultFormComponentConfig<'currency-form-input'>

CustomerGroupFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyFormControl<string | { id: string }>

customerGroups$

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

config

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

ngOnInit

method() =>

selectGroup

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

compareWith

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

DateFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'date-form-input'>

min

property

max

property

yearRange

property

FacetValueFormInputComponent

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

Signature

id

isListInput

property

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyInputComponentConfig

valueTransformFn

property

NumberFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'number-form-input'>

prefix

property

suffix

property

min

property

max

property

step

property

PasswordFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyInputComponentConfig

ProductSelectorFormInputComponent

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

Signature

id

isListInput

property

readonly

propertyboolean

formControl

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

config

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

selection$

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

ngOnInit

method() =>

addProductVariant

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

removeProductVariant

method(id: string) =>

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.

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyRelationCustomFieldConfig

RichTextFormInputComponent

Uses the RichTextEditorComponent as in input for text type fields.

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

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

SelectFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

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

uiLanguage$

propertyObservable<LanguageCode>

options

property

ngOnInit

method() =>

trackByFn

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

StructFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'struct-form-input'>

uiLanguage$

propertyObservable<LanguageCode>

structFormGroup

property

fields

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

ngOnInit

method() =>

ngOnDestroy

method() =>

TextFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'text-form-input'>

prefix

property

suffix

property

TextareaFormInputComponent

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

Signature

id

readonly

propertyboolean

formControl

propertyUntypedFormControl

config

propertyDefaultFormComponentConfig<'textarea-form-input'>

spellcheck

propertyboolean
Was this chapter helpful?
Report Issue
Edited Apr 20, 2026·Edit this page