A draggable, keyboard-accessible list that lets a user reorder a fixed set of rows by dragging the grip or using move-up/down/top/bottom buttons, reporting the new order as an array of values.
import { OrderList } from "@/components/ui/order-list";
import { useState } from "react";
const OPTIONS = [
{ label: "Prelude", value: "prelude" },
{ label: "Fugue", value: "fugue" },
{ label: "Interlude", value: "interlude" },
{ label: "Coda", value: "coda" },
];
export default function OrderListDemo() {
const [value, setValue] = useState(OPTIONS.map((option) => option.value));
return (
<div style={{ maxInlineSize: "22rem" }}>
<OrderList
value={value}
onValueChange={setValue}
options={OPTIONS}
label="Movements"
/>
<output
style={{
display: "block",
marginTop: "var(--bs-space-2)",
fontSize: "var(--bs-font-size-sm)",
color: "var(--bs-color-text-tertiary)",
}}
>
{value.join(" → ")}
</output>
</div>
);
}