OrderList

OrderList is used to sort a collection.


import OrderList from 'primevue/orderlist';

OrderList requires an array as its value bound with the v-model directive and option template for its content.

  • No available options
No available optionsNo selected item

<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
    <template #option="{ option }">
        {{ option.name }}
    </template>
</OrderList>

For custom content support define an option template that gets the item instance as a parameter. In addition header slot is provided for further customization.

  • No available options
No available optionsNo selected item

<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
    <template #option="{ option , selected }">
        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
            <div class="flex-1 flex flex-col">
                <span class="font-medium text-sm">{{ option.name }}</span>
                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
            </div>
            <span class="font-bold sm:ml-8">${{ option.price }}</span>
        </div>
    </template>
</OrderList>

Screen Reader

Value to describe the listbox can be provided with listProps by passing aria-labelledby or aria-label props. The list element 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 and aria.moveBottom properties of the locale API by default, alternatively you may use moveTopButtonProps, moveUpButtonProps, moveDownButtonProps and moveBottomButtonProps 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.