vendure/docs/docs/reference/admin-ui-api/custom-input-components/default-inputs.md

---

title: "Default Inputs" isDefaultIndex: false

generated: true

import MemberInfo from '@site/src/components/MemberInfo'; import GenerationInfo from '@site/src/components/GenerationInfo'; import MemberDescription from '@site/src/components/MemberDescription';

BooleanFormInputComponent

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

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

• Implements: FormInputComponent

### id DefaultFormComponentId`} /> ### readonly ### formControl ### config

HtmlEditorFormInputComponent

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

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 DefaultFormComponentId`} /> ### constructor HtmlEditorFormInputComponent`} /> ### ngOnInit `} />

JsonEditorFormInputComponent

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

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 DefaultFormComponentId`} /> ### constructor JsonEditorFormInputComponent`} /> ### ngOnInit `} />

CombinationModeFormInputComponent

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

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() => ;
}

• Implements: FormInputComponent, OnInit

### id DefaultFormComponentId`} /> ### readonly ### formControl ### config ### selectable$ ### constructor CombinationModeFormInputComponent`} /> ### ngOnInit `} /> ### setCombinationModeAnd `} /> ### setCombinationModeOr `} />

CurrencyFormInputComponent

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

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

• Implements: FormInputComponent

### id DefaultFormComponentId`} /> ### readonly ### formControl ### currencyCode$ CurrencyCode>`} /> ### config ### constructor DataService) => CurrencyFormInputComponent`} />

CustomerGroupFormInputComponent

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

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: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>, o2: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => ;
}

• Implements: FormInputComponent, OnInit

### id DefaultFormComponentId`} /> ### readonly ### formControl ### customerGroups$ ### config ### constructor DataService) => CustomerGroupFormInputComponent`} /> ### ngOnInit `} /> ### selectGroup `} /> ### compareWith `} />

DateFormInputComponent

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

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

### 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.

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

### id DefaultFormComponentId`} /> ### isListInput ### readonly ### formControl ### config ### valueTransformFn

NumberFormInputComponent

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

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

### id DefaultFormComponentId`} /> ### readonly ### formControl ### config ### prefix ### suffix ### min ### max ### step

PasswordFormInputComponent

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

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

• Implements: 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.

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

• Implements: FormInputComponent, OnInit

### id DefaultFormComponentId`} /> ### isListInput ### readonly ### formControl ### config ### selection$ ### constructor DataService) => ProductSelectorFormInputComponent`} /> ### 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.

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

• Implements: FormInputComponent

### id DefaultFormComponentId`} /> ### readonly ### formControl ### config

RichTextFormInputComponent

Uses the RichTextEditorComponent as in input for text type fields.

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

• Implements: 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.

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

• Implements: FormInputComponent, OnInit

### id DefaultFormComponentId`} /> ### readonly ### formControl ### config ### uiLanguage$ LanguageCode>`} /> ### options ### constructor DataService) => SelectFormInputComponent`} /> ### ngOnInit `} /> ### trackByFn `} />

TextFormInputComponent

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

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

### id DefaultFormComponentId`} /> ### readonly ### formControl ### config ### prefix ### suffix

TextareaFormInputComponent

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

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

• Implements: FormInputComponent

### id DefaultFormComponentId`} /> ### readonly ### formControl ### config ### spellcheck

© 2026 Git

Página: 817ms Plantilla: 64ms

español

español English 简体中文 繁體中文（香港） 繁體中文（臺灣） Deutsch français Nederlands latviešu русский 日本語 português do Brasil polski български italiano suomi Türkçe čeština српски svenska 한국어 galego українська English (United Kingdom) Magyar Slovenčina Indonesian Persian Vietnamese Português Монгол Română

Javascript Licenses Página web