A list or grid the user can reorder by dragging or with the keyboard.
(newItems: string[]) => void |
| – |
Called with the ids in their new order whenever an item moves: on drop with a pointer, or on each arrow key while moving one with the keyboard. Escape during a keyboard move calls it again with the original order. |
disabled | boolean | false | Whether items can't be moved. They are still shown and focusable. |
getItemLabel | ((id: string) => string) | – | Returns the text that names an item, for screen readers, announcements, the remove button and the drag preview. Defaults to the item's |
handleIcon | ReactNode | – | Replaces this icon. Accepts any node; |
labels | Partial<SortableLabels> | – | Replaces the built-in text for this instance. See |
onRemove | ((id: string) => void) | – | Called with an item's id when its |
onSortEnd | ((event: SortableEndEvent) => void) | – | Called when a lifted item is dropped or the drag is cancelled. |
onSortStart | ((id: string) => void) | – | Called with an item's id when it is lifted, by pointer or keyboard. |
orientation | "grid"|"horizontal"|"vertical" | "vertical" | How the items are laid out, which also sets the arrow keys: |
renderOverlay | ((id: string) => ReactNode) | – | What follows the pointer while an item is dragged. Defaults to a chip with a grip and the item's label. |
variant | "default"|"ghost"|"bordered" | default | The visual style of the component. |
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <span> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native attribute of the element it renders.
