PickList

PickList is used to reorder items between different lists..


import { PickList } from 'primereact/picklist';
         

OrderList is used as a controlled input with source, target and onChange properties. Content of a list item needs to be defined with the itemTemplate property that receives an object in the list as parameter.

Available
    Selected
      
      <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1400px"
          sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '30rem' }} targetStyle={{ height: '30rem' }} />
               

      Items are filtered using an input field by enabling the filter property. Filter value is checked against the property of an object configured with the filterBy property and the filtering match mode with filterMatchMode e.g. contains.

      Available
        Selected
          
          <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1400px"
              sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '30rem' }} targetStyle={{ height: '30rem' }}
              sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />
                   

          Following is the list of structural style classes, for theming classes visit theming page.

          NameElement
          p-picklistContainer element.
          p-picklist-source-controlsContainer of source list buttons.
          p-picklist-target-controlsContainer of target list buttons.
          p-picklist-buttonsContainer of buttons.
          p-picklist-listwrapperParent of a list element.
          p-picklist-listList element.
          p-picklist-itemAn item in the list.
          Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

          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 and aria-disabled 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.moveTo, aria.moveAllTo, aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.

          
          <span id="lb">Options</span>
          <OrderList aria-labelledby="lb" />
          
          <OrderList 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.