Reorder

A list whose order the reader sets, like the values of a product attribute or the steps of a checklist, takes Livewire's wire:sort on the list and wire:sort:item on each row. A reorder in each row then carries the handle a pointer drags and two arrow buttons for everyone else: nobody can drag with a keyboard or a screen reader, and anybody can press a button. The arrows call the same method a drop calls, so one method serves both.

It fits in any row: a list item, a card, a cell of a grid. Rows of a table take table.reorder, which draws the same controls as a table cell.

A list reordered by dragging or with the arrows

Small
Medium
Large

<x-wirekit::list type="none" spacing="md" wire:sort="moveValue">
    <x-wirekit::list.item wire:sort:item="1" wire:key="value-1">
        <x-wirekit::row gap="sm">
            <x-wirekit::reorder :item="1" :position="0" :count="3" action="moveValue" label="Small" />
            <x-wirekit::text>Small</x-wirekit::text>
        </x-wirekit::row>
    </x-wirekit::list.item>
    <x-wirekit::list.item wire:sort:item="2" wire:key="value-2">
        <x-wirekit::row gap="sm">
            <x-wirekit::reorder :item="2" :position="1" :count="3" action="moveValue" label="Medium" />
            <x-wirekit::text>Medium</x-wirekit::text>
        </x-wirekit::row>
    </x-wirekit::list.item>
    <x-wirekit::list.item wire:sort:item="3" wire:key="value-3">
        <x-wirekit::row gap="sm">
            <x-wirekit::reorder :item="3" :position="2" :count="3" action="moveValue" label="Large" />
            <x-wirekit::text>Large</x-wirekit::text>
        </x-wirekit::row>
    </x-wirekit::list.item>
</x-wirekit::list>

// 1. Called by a drop and by both arrows: the row's key and its new position, from 0
public function moveValue(int $id, int $position): void
{
    // 2. Store the new order, then render the rows in it
}

The Ends of the List

position and count disable the arrows that lead nowhere: the first row cannot move up, the last cannot move down. Without count, nothing here knows which row is last, so the down arrow of the last row stays enabled and calls the method with a position past the end.

Naming the Row

label names the row in the arrows' names, "Move Medium up". That matters wherever the row does not say what it is next to the arrows, and in a long list, where a screen reader moving from arrow to arrow otherwise hears "Move up" for every row.

Arrow Surface and Size

The arrows are neutral icon buttons, ghost at size xs unless told otherwise. arrow-surface and arrow-size take any surface and size a button takes, so an application whose icon buttons are soft draws its arrows the same way:

Arrows in the soft surface

Medium

<x-wirekit::row gap="sm">
    <x-wirekit::reorder :item="4" :position="1" :count="3" action="moveValue" label="Medium" arrow-surface="soft" arrow-size="sm" />
    <x-wirekit::text>Medium</x-wirekit::text>
</x-wirekit::row>

Lists Inside Lists

The focus comes back to the arrow in the list it was pressed in, and that list is the element holding the row that carries wire:sort:item. Two lists on one page can share their row keys, and a list can sit inside a row of another one, without the focus landing in the wrong list.

A drag reorders the rows in the browser before its request leaves, so the order on screen does not tell you whether the server has taken it. Each reorder carries the position the server drew in data-wk-reorder-position: a test that waits for those to match the new order waits for the server's answer, not for the browser's guess.

Props

Prop	Type	Default	Description
`item`	mixed	`null`	The row's key, the value its row carries in `wire:sort:item`
`position`	int	`0`	Where the row stands, counted from 0
`count`	int\|null	`null`	How many rows there are. Without it the down arrow is never disabled
`action`	string	`null`	The Livewire method the list's `wire:sort` calls. The arrows call it with the row's key and its new position
`label`	string\|null	`null`	What the row is, for the arrows' names — see Naming the Row
`arrowSurface`	string	`'ghost'`	The arrows' button surface: `filled`, `outline`, `soft`, `ghost` or `link`
`arrowSize`	string	`'xs'`	The arrows' button size: any size a button takes
`scope`	string\|null	`null`	Scoped personalization name

Accessibility

The arrows are how a keyboard and a screen reader move a row. Each is a button named for what it does, "Move up" and "Move down", or "Move Medium up" with a label. The name is the button's own text, hidden visually, and the tooltip shows the same words to a pointer.
The handle carries aria-hidden="true". Dragging is not something a keyboard or a screen reader can do, and the two buttons beside it are their way to the same result.
An arrow that leads nowhere is disabled, so it is skipped by the Tab key rather than announced as a button that does nothing.

Keyboard Interaction

Key	Action
`Tab`	Moves to the next arrow. The handle is not focusable
`Enter` / `Space`	Presses the focused arrow, which moves the row one place

After the server answers, the focus is back on the arrow that was pressed, in the row's new place, or on the other arrow once the row has reached an end. A row can be moved several places by pressing the same key again. A reader who moved on during the round trip keeps where they went.

Design Tokens

Element	Token
Handle	`--color-wk-text-subtle`, and `--color-wk-text-muted` on hover
Space between handle and arrows	`--gap-wk-xs`
Arrows	the button tokens of their surface and size