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

---

title: "Default Inputs" weight: 10 showtoc: true

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 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 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 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 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 static readonly id: DefaultFormComponentId = 'currency-form-input';
  @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 static readonly id: DefaultFormComponentId = 'customer-group-form-input';
  @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 static readonly id: DefaultFormComponentId = 'date-form-input';
  @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 static readonly id: DefaultFormComponentId = 'facet-value-form-input';
  readonly 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 static readonly id: DefaultFormComponentId = 'number-form-input';
  @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 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 static readonly id: DefaultFormComponentId = 'product-selector-form-input';
  readonly 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 static readonly id: DefaultFormComponentId = 'relation-form-input';
  @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 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 static readonly id: DefaultFormComponentId = 'select-form-input';
  @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 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 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

Page: 937ms Template: 12ms

English

English 简体中文 繁體中文（香港） 繁體中文（臺灣） Deutsch français Nederlands latviešu русский 日本語 español 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 Website