Label of an option is used as the display text of an item by default, for custom content support define an item template that gets the option instance as a parameter and returns the content.
+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.
MultiSelect 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.
+MultiSelect requires a value to bind and a collection of arbitrary objects along with the optionLabel property to specify the field name 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.
-In addition #value can be used to customize the selected values display instead of the default comma separated list.
+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.
+In addition the value template can be used to customize the selected values display instead of the default comma separated list.
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property.
+Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable the filter property.
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| Name | +Type | +Default | +Description | +
| value | -array | -null | -Value of the component. | -
| options | -array | -null | -An array of selectitems 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. | -
| scrollHeight | -string | -200px | -Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | -
| placeholder | -string | -null | -Label to display when there are no selections. | -
| disabled | -boolean | -false | -When present, it specifies that the component should be disabled. | -
| filter | -boolean | -true | -When specified, displays an input field to filter the items on keyup. | -
| tabIndex | -string | -null | -Index of the element in tabbing order. | -
| dataKey | -string | -null | -A property to uniquely match the value in options for better performance. | -
| filterPlaceholder | -string | -null | -Placeholder text to show when filter input is empty. | -
| optionValue | -string | -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. | +
| scrollHeight | +string | +200px | +Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | +
| placeholder | +string | +null | +Label to display when there are no selections. | +
| disabled | +boolean | +false | +When present, it specifies that the component should be disabled. | +
| filter | +boolean | +true | +When specified, displays an input field to filter the items on keyup. | +
| tabindex | +string | +null | +Index of the element in tabbing order. | +
| dataKey | +string | +null | +A property to uniquely match the value in options for better performance. | +
| filterPlaceholder | +string | +null | +Placeholder text to show when filter input is empty. | +
| Name | -Parameters | -Description | -
|---|---|---|
| Name | +Parameters | +Description | +
| change | -event.originalEvent: Browser event - event.value: Current selected values - |
- Callback to invoke when value changes. | -
| input | -event: Current selected values - |
- Callback to invoke when value 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-multiselect | -Container element. | -
| p-multiselect-label-container | -Container of the label to display selected items. | -
| p-multiselect-label-container | -Label to display selected items. | -
| p-multiselect-trigger | -Dropdown button. | -
| p-multiselect-filter-container | -Container of filter input. | -
| p-multiselect-panel | -Overlay panel for items. | -
| p-multiselect-items | -List container of items. | -
| p-multiselect-item | -An item in the list. | -
| p-multiselect | +Container element. | +
| p-multiselect-label-container | +Container of the label to display selected items. | +
| p-multiselect-label-container | +Label to display selected items. | +
| p-multiselect-trigger | +Dropdown button. | +
| p-multiselect-filter-container | +Container of filter input. | +
| p-multiselect-panel | +Overlay panel for items. | +
| p-multiselect-items | +List container of items. | +
| p-multiselect-item | +An item in the list. | +