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 requires a value to bind and a collection of arbitrary objects along with the optionLabel property to specify the label property of the option.
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.
+Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter.
Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| 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 | -??? | -
| value | +any | +null | +Value of the component. | +
| options | +array | +null | +An array of selectitems to display as the available options. | +
| optionLabel | +string | +null | +Property name to use as the label of an option. | +
| optionValue | +string | +null | +Property name to use as the value of an option, defaults to the option itself when not defined. | +
| optionDisabled | +boolean | +null | +Property name to use as the disabled flag of an option, defaults to false when not defined. | +
| 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. | +
| Name | -Parameters | -Description | -
|---|---|---|
| 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. | -
| change | +event.originalEvent: Original event + event.value: Selected option value |
+ Callback to invoke on value change. | +
| input | +value: New value | +Callback to invoke on value change. | +
| Name | -Element | -
|---|---|
| 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. | -
| 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. | +