Name	Type	Default	Description
modelValue	any	null	Value of the component.
options	array	null	An array of selectitems to display as the available options.
optionLabel	string \| function	null	Property name or getter function to use as the label of an option.
optionValue	string \| function	null	Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
optionDisabled	string \| function	null	Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
optionGroupLabel	string \| function	null	Property name or getter function to use as the label of an option group.
optionGroupChildren	string \| function	null	Property name or getter function that refers to the children options of option group.
scrollHeight	string	200px	Height of the viewport, a scrollbar is defined if height of list exceeds this value.
filter	boolean	false	When specified, displays a filter input at header.
filterPlaceholder	string	null	Placeholder text to show when filter input is empty.
filterLocale	string	undefined	Locale to use in filtering. The default locale is the host environment's current locale.
filterMatchMode	string	contains	Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"
filterFields	array	null	Fields used when filtering the options, defaults to optionLabel.
editable	boolean	false	When present, custom value instead of predefined options can be entered using the editable input field.
placeholder	string	null	Default text to display when no option is selected.
disabled	boolean	false	When present, it specifies that the component should be disabled.
dataKey	string	null	A property to uniquely identify an option.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
inputId	string	null	Identifier of the underlying input element.
inputStyle	any	null	Inline style of the input field.
inputClass	string	null	Style class of the input field.
inputProps	object	null	Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.
panelStyle	any	null	Inline style of the overlay panel.
panelClass	string	null	Style class of the overlay panel.
panelProps	object	null	Uses to pass all properties of the HTMLDivElement to the overlay panel.
filterInputProps	object	null	Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.
clearIconProps	object	null	Uses to pass all properties of the HTMLElement to the clear icon inside the component.
appendTo	string	body	A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.
loading	boolean	false	Whether the dropdown is in loading state.
loadingIcon	string	pi pi-spinner pi-spin	Icon to display in loading state.
resetFilterOnHide	boolean	false	Clears the filter value when hiding the dropdown.
virtualScrollerOptions	object	null	Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
autoOptionFocus	boolean	true	Whether to focus on the first visible or selected element when the overlay panel is shown.
autoFilterFocus	boolean	false	Whether to focus on the filter element when the overlay panel is shown.
selectOnFocus	boolean	false	When enabled, the focused option is selected.
filterMessage	string	{0} results are available	Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
selectionMessage	string	{0} items selected	Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
emptySelectionMessage	string	No selected item	Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.
emptyFilterMessage	string	No results found	Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
emptyMessage	string	No results found	Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.
tabindex	number	0	Index of the element in tabbing order.
aria-label	string	null	Defines a string value that labels an interactive element.
aria-labelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.

Name	Parameters	Description
change	event.originalEvent: Original event event.value: Selected option value	Callback to invoke on value change.
focus	event	Callback to invoke when the component receives focus.
blur	event	Callback to invoke when the component loses focus.
before-show	-	Callback to invoke before the overlay is shown.
before-hide	-	Callback to invoke before the overlay is hidden.
show	-	Callback to invoke when the overlay is shown.
hide	-	Callback to invoke when the overlay is hidden.
filter	event.originalEvent: Original event event.value: Filter value	Callback to invoke on filter input.

Name	Parameters	Description
show	isFocus: Decides whether to focus on the component. Default value is false.	Shows the overlay.
hide	isFocus: Decides whether to focus on the component. Default value is false.	Hides the overlay.

Name	Parameters
value	value: Value of the component placeholder: Placeholder prop value
indicator	-
header	value: Value of the component options: Displayed options
footer	value: Value of the component options: Displayed options
option	option: Option instance index: Index of the option
optiongroup	option: OptionGroup instance index: Index of the option group
emptyfilter	-
empty	-
content	items: An array of objects to display for virtualscroller styleClass: Style class of the component contentRef: Referance of the content getItemOptions: Options of the items
loader	options: Options of the loader items for virtualscroller

Name	Element
p-dropdown	Container element.
p-dropdown-label	Element to display label of selected option.
p-dropdown-trigger	Icon element.
p-dropdown-panel	Icon element.
p-dropdown-items-wrapper	Wrapper element of items list.
p-dropdown-items	List element of items.
p-dropdown-item	An item in the list.
p-dropdown-filter-container	Container of filter input.
p-dropdown-filter	Filter element.
p-overlay-open	Container element when overlay is visible.

Key	Function
tab	Moves focus to the dropdown element.
space	Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
enter	Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
down arrow	Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
up arrow	Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.
any printable character	Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and dropdown is not editable then first option receives the focus.

Key	Function
tab	Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.
shift + tab	Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.
enter	Selects the focused option and closes the popup, then moves focus to the dropdown element.
space	Selects the focused option and closes the popup, then moves focus to the dropdown element.
escape	Closes the popup, then moves focus to the dropdown element.
down arrow	Moves focus to the next option, if there is none then visual focus does not change.
up arrow	Moves focus to the previous option, if there is none then visual focus does not change.
alt + up arrow	Selects the focused option and closes the popup, then moves focus to the dropdown element.
left arrow	If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left.
right arrow	If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right.
home	If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option.
end	If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option.
pageUp	Jumps visual focus to first option.
pageDown	Jumps visual focus to last option.
any printable character	Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.

Key	Function
down arrow	Moves focus to the next option, if there is none then visual focus does not change.
up arrow	Moves focus to the previous option, if there is none then visual focus does not change.
left arrow	Removes the visual focus from the current option and moves input cursor to one character left.
right arrow	Removes the visual focus from the current option and moves input cursor to one character right.
home	Moves input cursor at the end, if not then moves focus to the first option.
end	Moves input cursor at the beginning, if not then moves focus to the last option.
enter	Closes the popup and moves focus to the dropdown element.
escape	Closes the popup and moves focus to the dropdown element.
tab	Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.

Import via Module

Import via CDN

Getting Started

Placeholder

Grouping

Filtering

Templating

Properties

Events

Methods

Slots

Styling

Accessibility

Screen Reader

Closed State Keyboard Support

Popup Keyboard Support

Filter Input Keyboard Support

Dependencies