# CurrencyFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/currency-form-input/currency-form-input.component.ts" sourceLine="17" packageName="
/admin-ui">}}
An input for monetary values. Should be used with `int` type fields.
## Signature
```TypeScript
class CurrencyFormInputComponent implements FormInputComponent {
static readonly static readonly id: DefaultFormComponentId = 'currency-form-input';
() readonly: boolean;
formControl: UntypedFormControl;
currencyCode$: Observable;
config: DefaultFormComponentConfig<'currency-form-input'>;
constructor(dataService: DataService)
}
```
## Implements
*
" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### currencyCode$
{{< member-info kind="property" type="Observable<
>" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'currency-form-input'>" >}}
{{< member-description >}}{{< /member-description >}}
### constructor
{{< member-info kind="method" type="(dataService:
) => CurrencyFormInputComponent" >}}
{{< member-description >}}{{< /member-description >}}
# CustomerGroupFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component.ts" sourceLine="20" packageName="
@vendure/admin-ui">}}
Allows the selection of a Customer via an autocomplete select input.
Should be used with `ID` type fields which represent Customer IDs.
## Signature
```TypeScript
class CustomerGroupFormInputComponent implements FormInputComponent, OnInit {
static readonly static readonly id: DefaultFormComponentId = 'customer-group-form-input';
@Input()
@Input() readonly: boolean;
formControl: UntypedFormControl;
customerGroups$: Observable;
config: DefaultFormComponentConfig<'customer-group-form-input'>;
constructor(dataService: DataService)
ngOnInit() => ;
selectGroup(group: ItemOf) => ;
}
```
## Implements
*
FormInputComponent
* OnInit
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### customerGroups$
{{< member-info kind="property" type="Observable<GetCustomerGroupsQuery['customerGroups']['items']>" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'customer-group-form-input'>" >}}
{{< member-description >}}{{< /member-description >}}
### constructor
{{< member-info kind="method" type="(dataService:
DataService) => CustomerGroupFormInputComponent" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnInit
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### selectGroup
{{< member-info kind="method" type="(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => " >}}
{{< member-description >}}{{< /member-description >}}
# DateFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/date-form-input/date-form-input.component.ts" sourceLine="14" packageName="
@vendure/admin-ui">}}
Allows selection of a datetime. Default input for `datetime` type fields.
## Signature
```TypeScript
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
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'date-form-input'>" >}}
{{< member-description >}}{{< /member-description >}}
### min
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### max
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### yearRange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
# FacetValueFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component.ts" sourceLine="16" packageName="
@vendure/admin-ui">}}
Allows the selection of multiple FacetValues via an autocomplete select input.
Should be used with `ID` type **list** fields which represent FacetValue IDs.
## Signature
```TypeScript
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
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### isListInput
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="InputComponentConfig" >}}
{{< member-description >}}{{< /member-description >}}
### valueTransformFn
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
# NumberFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/number-form-input/number-form-input.component.ts" sourceLine="14" packageName="
@vendure/admin-ui">}}
Displays a number input. Default input for `int` and `float` type fields.
## Signature
```TypeScript
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
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'number-form-input'>" >}}
{{< member-description >}}{{< /member-description >}}
### prefix
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### suffix
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### min
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### max
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### step
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
# PasswordFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/password-form-input/password-form-input.component.ts" sourceLine="14" packageName="
@vendure/admin-ui">}}
Displays a password text input. Should be used with `string` type fields.
## Signature
```TypeScript
class PasswordFormInputComponent implements FormInputComponent {
static readonly static readonly id: DefaultFormComponentId = 'password-form-input';
readonly: boolean;
formControl: UntypedFormControl;
config: InputComponentConfig;
}
```
## Implements
*
FormInputComponent
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="InputComponentConfig" >}}
{{< member-description >}}{{< /member-description >}}
# ProductSelectorFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component.ts" sourceLine="20" packageName="
@vendure/admin-ui">}}
Allows the selection of multiple ProductVariants via an autocomplete select input.
Should be used with `ID` type **list** fields which represent ProductVariant IDs.
## Signature
```TypeScript
class ProductSelectorFormInputComponent implements FormInputComponent, OnInit {
static readonly static readonly id: DefaultFormComponentId = 'product-selector-form-input';
readonly readonly isListInput = true;
readonly: boolean;
formControl: UntypedFormControl;
config: InputComponentConfig;
selection$: Observable>;
constructor(dataService: DataService)
ngOnInit() => ;
addProductVariant(product: ProductSelectorSearchQuery['search']['items'][number]) => ;
removeProductVariant(id: string) => ;
}
```
## Implements
*
FormInputComponent
* OnInit
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### isListInput
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="InputComponentConfig" >}}
{{< member-description >}}{{< /member-description >}}
### selection$
{{< member-info kind="property" type="Observable<Array<GetProductVariantQuery['productVariant']>>" >}}
{{< member-description >}}{{< /member-description >}}
### constructor
{{< member-info kind="method" type="(dataService:
DataService) => ProductSelectorFormInputComponent" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnInit
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### addProductVariant
{{< member-info kind="method" type="(product: ProductSelectorSearchQuery['search']['items'][number]) => " >}}
{{< member-description >}}{{< /member-description >}}
### removeProductVariant
{{< member-info kind="method" type="(id: string) => " >}}
{{< member-description >}}{{< /member-description >}}
# RelationFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/relation-form-input/relation-form-input.component.ts" sourceLine="17" packageName="
@vendure/admin-ui">}}
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
```TypeScript
class RelationFormInputComponent implements FormInputComponent {
static readonly static readonly id: DefaultFormComponentId = 'relation-form-input';
@Input()
@Input() readonly: boolean;
formControl: UntypedFormControl;
config: RelationCustomFieldConfig;
}
```
## Implements
*
FormInputComponent
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="RelationCustomFieldConfig" >}}
{{< member-description >}}{{< /member-description >}}
# RichTextFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component.ts" sourceLine="14" packageName="
@vendure/admin-ui">}}
Uses the
RichTextEditorComponent as in input for `text` type fields.
## Signature
```TypeScript
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
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'rich-text-form-input'>" >}}
{{< member-description >}}{{< /member-description >}}
# SelectFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.ts" sourceLine="18" packageName="
@vendure/admin-ui">}}
Uses a select input to allow the selection of a string value. Should be used with
`string` type fields with options.
## Signature
```TypeScript
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;
options: void
constructor(dataService: DataService)
ngOnInit() => ;
trackByFn(index: number, item: any) => ;
}
```
## Implements
*
FormInputComponent
* OnInit
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment" >}}
{{< member-description >}}{{< /member-description >}}
### uiLanguage$
{{< member-info kind="property" type="Observable<
LanguageCode>" >}}
{{< member-description >}}{{< /member-description >}}
### options
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### constructor
{{< member-info kind="method" type="(dataService:
DataService) => SelectFormInputComponent" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnInit
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### trackByFn
{{< member-info kind="method" type="(index: number, item: any) => " >}}
{{< member-description >}}{{< /member-description >}}
# TextFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/text-form-input/text-form-input.component.ts" sourceLine="14" packageName="
@vendure/admin-ui">}}
Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
## Signature
```TypeScript
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
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'text-form-input'>" >}}
{{< member-description >}}{{< /member-description >}}
### prefix
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### suffix
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
# TextareaFormInputComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/textarea-form-input/textarea-form-input.component.ts" sourceLine="14" packageName="
@vendure/admin-ui">}}
Uses textarea form input. This is the default input for `text` type fields.
## Signature
```TypeScript
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
## Members
### id
{{< member-info kind="property" type="
DefaultFormComponentId" >}}
{{< member-description >}}{{< /member-description >}}
### readonly
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### formControl
{{< member-info kind="property" type="UntypedFormControl" >}}
{{< member-description >}}{{< /member-description >}}
### config
{{< member-info kind="property" type="DefaultFormComponentConfig<'textarea-form-input'>" >}}
{{< member-description >}}{{< /member-description >}}
### spellcheck
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}