Listbox requires a value to bind, optionLabel and a collection of options. How to define the options property; Providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option.
+Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected + using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default. On touch enabled + devices metaKeySelection is turned off automatically.
+Label of an option is used as the display text of an item by default, for custom content support define a template where + the local template variable refers to an option in the options collection.
+Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| value | +object | +null | +Selected value to display. | +
| options | +array | +null | +An array of objects to display as the available options. | +
| optionLabel | +string | +null | +Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options. | +
| listStyle | +string | +null | +Inline style of inner list element. | +
| disabled | +boolean | +false | +When specified, disables the component. | +
| dataKey | +string | +false | +A property to uniquely match the value in options for better performance. | +
| multiple | +boolean | +false | +When specified, allows selecting multiple values. | +
| metaKeySelection | +boolean | +true | +Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item + can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. | +
| filter | +boolean | +false | +When specified, displays a filter input at header. | +
| optionValue | +??? | +null | +??? | +
| optionDisabled | +boolean | +null | +??? | +
| Name | +Parameters | +Description | +
|---|---|---|
| change | +event.originalEvent: Browser event + event.value: Single value or an array of values depending on the selection mode + |
+ Callback to invoke when value of listbox changes. | +
| input | +event: Single value or an array of values depending on the selection mode + |
+ Callback to invoke when value of listbox changes. | +
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-listbox | +Main container element. | +
| p-listbox-header | +Header element. | +
| p-listbox-list-wrapper | +Container of list element. | +
| p-listbox-list | +List element. | +
| p-listbox-item | +An item in the list element. | +
None.
+