vendure/docs/docs/reference/admin-ui-api/components/facet-value-selector-component.md

---

title: "FacetValueSelectorComponent" 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';

FacetValueSelectorComponent

A form control for selecting facet values.

Example

<vdr-facet-value-selector
  (selectedValuesChange)="selectedValues = $event"
></vdr-facet-value-selector>

The selectedValuesChange event will emit an array of FacetValue objects.

class FacetValueSelectorComponent implements OnInit, OnDestroy, ControlValueAccessor {
    @Output() selectedValuesChange = new EventEmitter<FacetValueFragment[]>();
    @Input() readonly = false;
    @Input() transformControlValueAccessorValue: (value: FacetValueFragment[]) => any[] = value => value;
    searchInput$ = new Subject<string>();
    searchLoading = false;
    searchResults$: Observable<FacetValueFragment[]>;
    selectedIds$ = new Subject<string[]>();
    onChangeFn: (val: any) => void;
    onTouchFn: () => void;
    disabled = false;
    value: Array<string | FacetValueFragment>;
    constructor(dataService: DataService, changeDetectorRef: ChangeDetectorRef)
    ngOnInit() => void;
    ngOnDestroy() => ;
    onChange(selected: FacetValueFragment[]) => ;
    registerOnChange(fn: any) => ;
    registerOnTouched(fn: any) => ;
    setDisabledState(isDisabled: boolean) => void;
    focus() => ;
    writeValue(obj: string | FacetValueFragment[] | Array<string | number> | null) => void;
}

• Implements: OnInit, OnDestroy, ControlValueAccessor

### selectedValuesChange ### readonly ### transformControlValueAccessorValue ### searchInput$ ### searchLoading ### searchResults$ ### selectedIds$ ### onChangeFn ### onTouchFn ### disabled ### value ### constructor DataService, changeDetectorRef: ChangeDetectorRef) => FacetValueSelectorComponent`} /> ### ngOnInit void`} /> ### ngOnDestroy `} /> ### onChange `} /> ### registerOnChange `} /> ### registerOnTouched `} /> ### setDisabledState void`} /> ### focus `} /> ### writeValue void`} />