Listbox
Accessible single or multiple selection list.
Usage
API Reference
VoltListboxHeader — volt-listbox-header
| Input | Type | Default |
|---|---|---|
| class | string | '' |
| id | string | — |
VoltListboxOption — volt-listbox-option
| Input | Type | Default |
|---|---|---|
| id | string | — |
| value * | T | — |
| disabled | boolean | false |
| inset | ListboxOptionVariants['inset'] | false |
| class | string | '' |
VoltListboxSection — volt-listbox-section
| Input | Type | Default |
|---|---|---|
| class | string | '' |
VoltListbox — volt-listbox
| Input | Type | Default |
|---|---|---|
| class | string | '' |
| id | string | — |
| mode | NgpSelectionMode | 'single' |
| value | T[] | [] |
| disabled | boolean | false |
| compareWith | (a: T, b: T) => boolean | (a, b) => a === b |
| Output | Type |
|---|---|
| valueChange | T[] |
CVA variants
| Prop | Options | Default |
|---|---|---|
| inset | true | false | — |
Component Source
Install via CLI:
npx @voltui/cli add listboxTypeScript
Loading editor…
Copy this code to your project. The component uses ng-primitives/listbox.