A list of items that can be reordered by dragging and dropping. Supports RTL.
Loading demo: draggable-list-real-world
npx sdaia-ui@latest add draggable-list
import { DraggableList } from "@/components/ui/draggable-list"<DraggableList />A list of items that can be reordered by dragging.
Loading demo: draggable-list-default
Props for the DraggableItem component.
Prop | Type | Default | Required |
|---|---|---|---|
state | 'default' | 'focused' | 'disabled' | 'default' | optional |
disabled | boolean | false | optional |
dir | 'ltr' | 'rtl' | - | optional |
rtl | boolean | deprecated | optional |
showDragHandle | boolean | true | optional |
leadingIcon | ReactNode | - | optional |
checkbox | boolean | false | optional |
checked | boolean | false | optional |
indeterminate | boolean | false | optional |
onCheckedChange | (checked: boolean) => void | - | optional |
avatarSrc | string | - | optional |
avatarAlt | string | - | optional |
startLabel | ReactNode | "Option 1" | optional |
startSecondary | ReactNode | - | optional |
startDescription | ReactNode | "Description text" | optional |
endLabel | ReactNode | - | optional |
endSecondary | ReactNode | - | optional |
endDescription | ReactNode | - | optional |
tagSlot | ReactNode | - | optional |
buttonSlot | ReactNode | - | optional |
trailingIcon | ReactNode | - | optional |
statusDot | boolean | true | optional |