PickList

PickList is used to reorder items between different lists.


import PickList from 'primevue/picklist';

PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content that gets the item instance and the index via slotProps.

Available
    Selected
      
      <PickList v-model="products" listStyle="height:342px" dataKey="id" breakpoint="1400px">
          <template #sourceheader> Available </template>
          <template #targetheader> Selected </template>
          <template #item="slotProps">
              <div class="flex flex-wrap p-2 align-items-center gap-3">
                  <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                  <div class="flex-1 flex flex-column gap-2">
                      <span class="font-bold">{{ slotProps.item.name }}</span>
                      <div class="flex align-items-center gap-2">
                          <i class="pi pi-tag text-sm"></i>
                          <span>{{ slotProps.item.category }}</span>
                      </div>
                  </div>
                  <span class="font-bold">$ {{ slotProps.item.price }}</span>
              </div>
          </template>
      </PickList>
      
      

      Screen Reader

      Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected as their attributes.

      Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveToTarget, aria.moveAllToTarget, aria.moveToSource and aria.moveAllToSource properties of the locale API by default, alternatively you may use moveTopButtonProps, moveUpButtonProps, moveDownButtonProps, moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps moveAllFromButtonProps moveToTargetProps, moveAllToTargetProps, moveToSourceProps and moveAllToSourceProps to customize the buttons like overriding the default aria-label attributes.

      
      <span id="lb">Options</span>
      <PickList aria-labelledby="lb" />
      
      <PickList aria-label="City" />
      
      

      ListBox Keyboard Support

      KeyFunction
      tabMoves focus to the first selected option, if there is none then first option receives the focus.
      up arrowMoves focus to the previous option.
      down arrowMoves focus to the next option.
      enterToggles the selected state of the focused option.
      spaceToggles the selected state of the focused option.
      homeMoves focus to the first option.
      endMoves focus to the last option.
      shift + down arrowMoves focus to the next option and toggles the selection state.
      shift + up arrowMoves focus to the previous option and toggles the selection state.
      shift + spaceSelects the items between the most recently selected option and the focused option.
      control + shift + homeSelects the focused options and all the options up to the first one.
      control + shift + endSelects the focused options and all the options down to the first one.
      control + aSelects all options.

      Buttons Keyboard Support

      KeyFunction
      enterExecutes button action.
      spaceExecutes button action.