Sortable
Reorders a list by dragging: rows of a group, table rows, images, tags and cards. The order changes on the drop.
Examples
Rows
Home screen
Today at a glance.
The latest ten.
New this week.
Sent on Mondays.
Rows with a handle
Contact details
Stacked rows
Questions
Different controls
Preferences
English
Select date
Table
| Product | SKU | Stock | Price | |
|---|---|---|---|---|
| Oak side table | OS-120 | 14 | €129.00 | |
| Brass floor lamp | BF-210 | 6 | €189.00 | |
| Linen armchair | LA-330 | 3 | €449.00 | |
| Wool rug | WR-410 | 22 | €249.00 |
Images
Tags
Design
Engineering
Marketing
Sales
Support
Finance
Legal
Operations
Cards
Revenue
€45,231
Orders
1,204
Customers
892
Refunds
12
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | T[] | — | The list, in the order of the children |
onChange | (value: T[]) => void | — | Called with the new order after a drop |
layout | 'list' | 'grid' | list | list for rows one under another, grid for items that stand side by side |
as | ElementType | div | Element to render, such as TableBody for table rows |
disabled | boolean | false | Turns dragging off |
handles | boolean | true in a table, otherwise false | Shows the grips of Sortable.Handle. A hidden grip still takes the keyboard, and the item drags from anywhere but a control |
children | ReactNode | — | The items: one direct child per entry of value, keyed by the entry and not by its index |
Sortable.Handle is the grip of an item. It renders a button, takes its props, and shows GripVertical unless it has children.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | Reorder | Name of the handle for assistive technology |
The chip takes its text from data-sortable-label on the item, then from an element with that attribute or a label inside it, then from its first text. It shows the first img of the item.
Styling
Sortable reads these component tokens. Override them at any scope to restyle it:
--sortable-chip-max-width: chip max width (default18rem)--sortable-chip-radius: chip radius (default14px)--sortable-chip-image-size: picture in the chip (default40px)--sortable-chip-shadow: chip shadow--sortable-chip-z-index: chip layer (default100000)--sortable-handle-size: handle size (default32px)--sortable-handle-icon-size: grip size (default16px)--sortable-handle-inset: handle offset from the edge of a row (default8px)--sortable-handle-color: grip color (defaultvar(--color-text-tertiary))--sortable-handle-color-hover: grip color on hover (defaultvar(--color-text-secondary))--sortable-line-size: line thickness (default2px)--sortable-line-color: line color (defaultvar(--color-background-info-solid))--sortable-slot-inset: slot inset in a list (default8px)--sortable-slot-radius: slot radius (default12px)--sortable-slot-background: slot under the pointer (defaultvar(--color-background-info-soft))--sortable-slot-background-away: slot once the pointer left it (defaultvar(--color-surface-tertiary))