Draggable List
A list of items that can be reordered by dragging and dropping. Supports RTL.
<DraggableList> {items.map((item) => ( <DraggableItem startLabel={item.label} startDescription="Description text" statusDot /> ))}</DraggableList>Installation
npx sdaia-ui@latest add draggable-list
Usage
import { DraggableList } from "@/components/ui/draggable-list"<DraggableList />Examples
Default
A list of items that can be reordered by dragging.
<DraggableList> <DraggableItem startLabel="Option 1" startDescription="Description text" /> <DraggableItem startLabel="Option 1" startDescription="Description text" /> <DraggableItem startLabel="Option 1" startDescription="Description text" /> <DraggableItem startLabel="Option 1" startDescription="Description text" />API Reference
DraggableItemProps
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 |