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 |