Skip to content
KansoMakado design system 1.1
makado.app

Forms

ReorderList

A list you put in order, such as a workspace's stages.

Preview

Live, in this page’s themeOpen on its own

Props

Also takes the props of ReorderItem = ReorderItem>.

PropTypeDescription
itemsRequiredT[]
onReorderRequired(keys: string[]) => void
renderItemRequired(item: T, index: number) => React.ReactNode
labelRequiredstring
classNamestring

Guidelines

A list you put in order, such as a workspace's stages. Each row has a handle on its left: drag it (mouse, pen or finger), or focus it and press Alt with Up or Down. Every move is announced ("Color moved to 6 of 9").

Provide: items ({ key, label, locked }), onReorder(keys), renderItem(item, index) for what each row shows beside its handle, and a label for the list.

  • locked rows stay where they are, and nothing moves past them (To do first, Published last). They keep the handle's space so rows line up.
  • The row being dragged lifts with the emphasized shadow; the others make room as it passes their middle. Reduced motion drops the lift.
  • Rows are solid surfaces with a hairline, never glass.
  • Keep row content to one line on desktop; it wraps on phones.