Sortable
Reorders a list by dragging: rows of a group, table rows, images, tags and cards. The order changes on the drop.
Examples
Rows
Rows with a handle
Stacked rows
Different controls
Table
Images
Tags
Cards
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | unknown[] | — | The list, in the order of the children. Bind with v-model:value |
layout | 'list' | 'grid' | list | list for rows one under another, grid for items that stand side by side |
as | string | Component | 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 SortableHandle. A hidden grip still takes the keyboard, and the item drags from anywhere but a control |
Events: update:value and change fire with the new order after a drop. The default slot holds the items: one direct child per entry of value, keyed by the entry and not by its index.
SortableHandle is the grip of an item. It renders a button, takes its attributes, and shows GripVertical unless its slot has content.
| 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))