--- title: "Reordering" description: "Move items up or down with arrow buttons." ---

ReorderList displays labels with up and down arrows. It handles spacing, scrolling and moving items.

## Example ```tsx app/index.tsx import { useState } from "react"; import { ReorderList, Screen } from "ink"; export default function Reordering() { const [items, setItems] = useState([ { id: "1", name: "Item 1" }, { id: "2", name: "Item 2" }, { id: "3", name: "Item 3" }, { id: "4", name: "Item 4" }, ]); return item.id} getLabel={item => item.name} onChange={setItems} /> ; } ```

Use a unique, stable ID for each item. onChange receives a new array in the selected order.

This example keeps the order until the app closes. Use Store to save it between sessions.

**Before** Four items in order, with down and up arrows beside each row. The first up arrow and last down arrow are disabled. **After** Item 1 has moved below Item 2. Item 3 and Item 4 keep their positions.
Use `gap` to set the spacing between rows. It defaults to 47 logical units, matching `List`. ## Scrolling

The component automatically shows a scrollbar when items overflow.

The bottom of the eight-item list. Item 8 has a disabled down arrow and the scrollbar is at the bottom.
## Long names

Labels use one line by default. Long names end with an ellipsis, leaving room for both arrows.

A long name ends with an ellipsis before the arrows. Eight rows make the screen scroll, with a scrollbar on the right.
## Multiline names

Set multiline to show the full label.

```tsx item.id} getLabel={item => item.name} onChange={setItems} multiline /> ```
The full item name wraps across several lines. Both arrows stay visible and vertically centred beside it.