VUI Select Input

A customizable single-selection dropdown component with search and validation support.

📦 Installation

npm install @vui/select-input

Basic Usage

import { VuiSelectComponent } from '@vui/select-input';

@Component({
  template: `
    <ng-vui-select-input
      [options]="countries"
      placeholder="Select country"
      formControlName="country">
    </ng-vui-select-input>
  `
})
export class MyComponent {
  countries = [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' }
  ];
}

🚀 Live Demo

With Validation

form = this.fb.group({
  country: ['', Validators.required],
  city: ['', Validators.required]
});

// Dependent dropdowns
onCountryChange(country: string): void {
  this.cities = this.getCitiesByCountry(country);
  this.form.patchValue({ city: '' }); // Reset city when country changes
}

📚 API Reference

Property Type Description
options SelectOption[] Array of options to display
placeholder string Placeholder text
disabled boolean Whether the select is disabled