Combobox
Searchable select input with a custom option template.
Usage
API Reference
VoltComboboxButton — volt-combobox-button
| Input | Type | Default |
|---|---|---|
| id | string | `volt-combobox-button-${++nextComboboxButtonId}` |
VoltComboboxDropdown — volt-combobox-dropdown
| Input | Type | Default |
|---|---|---|
| id | string | `volt-combobox-dropdown-${++nextComboboxDropdownId}` |
VoltComboboxInput — input[voltComboboxInput]
| Input | Type | Default |
|---|---|---|
| id | unknown | — |
VoltComboboxOption — volt-combobox-option
| Input | Type | Default |
|---|---|---|
| value * | unknown | — |
| disabled | boolean | false |
| index | number | undefined | — |
| Output | Type |
|---|---|
| activated | void |
VoltCombobox — volt-combobox
| Input | Type | Default |
|---|---|---|
| id | string | `volt-combobox-${++nextComboboxId}` |
| label | string | — |
| value | unknown | — |
| multiple | boolean | false |
| disabled | boolean | false |
| allowDeselect | boolean | true |
| compareWith | (a: unknown, b: unknown) => boolean | Object.is |
| dropdownPlacement | NgpComboboxPlacement | 'bottom' |
| container | string | HTMLElement | null | 'body' |
| flip | NgpFlipInput | true |
| scrollToOption | ((index: number) => void) | undefined | undefined |
| allOptions | unknown[] | undefined | undefined |
| items | unknown[] | [] |
| placeholder | string | 'Select...' |
| itemLabel | (item: unknown) => string | item => typeof item === 'string' ? item : String(item) |
| trackByFn | (index: number, item: unknown) => unknown | (_i, item) => item |
| Output | Type |
|---|---|
| valueChange | unknown |
Component Source
Install via CLI:
npx @voltui/cli add comboboxTypeScript
Loading editor…
Copy this code to your project. The component uses ng-primitives/combobox.