- JFK
John F. Kennedy - LHRHeathrow
- CDGCharles de Gaulle
- FRAFrankfurt
- AMSSchiphol
- ISTIstanbul
- DXBDubai
- SINChangi
- HNDHaneda
Usage #
Examples #
Basic #
Listbox is used with the v-model property for two-way value binding along with the options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.
- New York
- Rome
- London
- Istanbul
- Paris
Option #
For custom content support define an option slot where the default slot props refers to an option.
- Australia
- Brazil
- China
- Egypt
- France
- Germany
- India
- Japan
- Spain
- United States
Selection #
Checkmark #
Enable the checkmark property to display a checkmark indicator next to the selected option. Set highlightOnSelect to false to use checkmark-only styling.
- New York
- Rome
- London
- Istanbul
- Paris
Multiple #
Listbox allows choosing a single item by default, enable multiple property to choose more than one. When the optional metaKeySelection is present, behavior is changed in a way that selecting a new item requires meta key to be present.
- New York
- Rome
- London
- Istanbul
- Paris
Meta Key Selection #
Use metaKeySelection in multiple mode to require Ctrl / Cmd for additive selection.
Hold Ctrl (or Cmd on macOS) while selecting to keep existing selections.
- New York
- Rome
- London
- Istanbul
- Paris
Checkbox #
Combine the multiple property with the checkbox property to render checkboxes for each option.
- New York
- Rome
- London
- Istanbul
- Paris
Group #
Simple #
Options can be grouped when a nested data structure is provided by defining optionGroupLabel and optionGroupChildren properties.
- Germany
- Berlin
- Frankfurt
- Hamburg
- Munich
- USA
- Chicago
- Los Angeles
- New York
- San Francisco
- Japan
- Kyoto
- Osaka
- Tokyo
- Yokohama
Custom #
Use the optiongroup slot to customize group headers with custom content like flags.
- 🇩🇪Germany
- Berlin
- Frankfurt
- Hamburg
- Munich
- 🇺🇸USA
- Chicago
- Los Angeles
- New York
- San Francisco
- 🇯🇵Japan
- Kyoto
- Osaka
- Tokyo
- Yokohama
Filter #
Listbox provides built-in filtering that is enabled by adding the filter property.
- New York
- Rome
- London
- Istanbul
- Paris
Invalid #
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- New York
- Rome
- London
- Istanbul
- Paris
Disabled #
When disabled is present, the element cannot be edited and focused.
- New York
- Rome
- London
- Istanbul
- Paris
Disabled Options #
Use optionDisabled to disable specific items by field name while keeping the listbox itself interactive.
- New York
- Rome
- London
- Istanbul
- Paris
Focus Behavior #
Use autoOptionFocus to control initial focused option behavior, selectOnFocus to select options while navigating with focus, and focusOnHover to move focus with mouse hover when the component is focused.
- New York
- Rome
- London
- Istanbul
- Paris
Virtual Scroll #
VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with virtualScrollerOptions property, refer to the VirtualScroller for more information about the available options as it is used internally by Listbox.
Forms #
Listbox integrates seamlessly with the PrimeVue Forms library.
Accessibility #
Screen Reader
Value to describe the component can be provided aria-labelledby or aria-label props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is enabled. Each list item has an option role with aria-selected and aria-disabled as their attributes.
If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element. Alternatively filterPlaceholder is usually utilized by the screen readers as well.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the first selected option, if there is none then first option receives the focus. |
| up arrow | Moves focus to the previous option. |
| down arrow | Moves focus to the next option. |
| enter | Toggles the selected state of the focused option. |
| space | Toggles the selected state of the focused option. |
| home | Moves focus to the first option. |
| end | Moves focus to the last option. |
| shift + down arrow | Moves focus to the next option and toggles the selection state. |
| shift + up arrow | Moves focus to the previous option and toggles the selection state. |
| shift + space | Selects the items between the most recently selected option and the focused option. |
| control + shift + home | Selects the focused options and all the options up to the first one. |
| control + shift + end | Selects the focused options and all the options down to the last one. |
| control + a | Selects all options. |
| 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. |
Filter Input Keyboard Support
| 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 multiselect element. |
| escape | Closes the popup and moves focus to the multiselect element. |
| tab | Moves focus to the next focusable element in the component. If there is none, moves focus to next element in page. |