vendure/docs/docs/reference/admin-ui-api/components/product-variant-selector-component.md

---

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

ProductVariantSelectorComponent

A component for selecting product variants via an autocomplete-style select input.

Example

<vdr-product-variant-selector
  (productSelected)="selectResult($event)"></vdr-product-variant-selector>

class ProductVariantSelectorComponent implements OnInit {
    searchInput$ = new Subject<string>();
    searchLoading = false;
    searchResults$: Observable<ProductSelectorSearchQuery['search']['items']>;
    @Output() productSelected = new EventEmitter<ProductSelectorSearchQuery['search']['items'][number]>();
    constructor(dataService: DataService)
    ngOnInit() => void;
    selectResult(product?: ProductSelectorSearchQuery['search']['items'][number]) => ;
}

• Implements: OnInit

### searchInput$ ### searchLoading ### searchResults$ ### productSelected ### constructor DataService) => ProductVariantSelectorComponent`} /> ### ngOnInit void`} /> ### selectResult `} />