SortList

SortList renders a shuffled list of items and lets users drag and drop to arrange them in the correct order. It uses @dnd-kit/react for accessible drag and drop interactions.

Import

import { SortList } from '@bside-tech/tbx-ui/components';

Example

First step
Second step
Third step
Fourth step

<SortList
  items={[
    'First step',
    'Second step',
    'Third step',
    'Fourth step',
  ]}
  variant="column"
/>

Props

Prop

Type

Labels

Override labels via the labels prop. Supported keys: check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct").

<SortList
  items={['First', 'Second', 'Third']}
  labels={{
    check: 'Verify order',
    reset: 'Shuffle again',
    results: 'correct',
  }}
/>

Style

Tailwind v4 is available for customisations. Pass classes via the classNames prop, or override CSS variables for fine-grained control.

CSS Classes

Key	Element
`root`	Root wrapper
`list`	List container
`item`	Sortable item
`checkButton`	Check button
`resetButton`	Reset button
`result`	Results text

CSS Variables

Scoped under .tbx-sortlist:

Variable	Purpose
`--sortlist-item-bg`	Item background
`--sortlist-item-border`	Item border
`--sortlist-item-dragging`	Item background when dragging
`--sortlist-action-bg`, `--sortlist-action-border`	Check/Reset button background and border
`--sortlist-result-neutral`, `--sortlist-result-correct`, `--sortlist-result-wrong`	Results text colors (neutral, correct, wrong)
`--sortlist-correct-bg`, `--sortlist-correct-border`	Item when correct
`--sortlist-wrong-bg`, `--sortlist-wrong-border`	Item when wrong

These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout.

Item labels use --exercise-layout-content-font-size.

Variants

Column (default)

Items are stacked vertically. Ideal for ordered lists like steps or rankings.

Prepare ingredients
Mix the dough
Shape and bake
Cool and serve

<SortList
  items={[
    'Prepare ingredients',
    'Mix the dough',
    'Shape and bake',
    'Cool and serve',
  ]}
  variant="column"
/>

Row

Items are arranged horizontally. Use for short labels or categories.

Smallest
Small
Medium
Large
Largest

<SortList
  items={['Smallest', 'Small', 'Medium', 'Large', 'Largest']}
  variant="row"
/>

Hook

Use useSortListExercise when building custom sort interfaces:

import { useSortListExercise } from '@bside-tech/tbx-ui/hooks';

const { order, reorder, setOrder, isCorrect, check, reset } = useSortListExercise({
  itemCount: 5,
  checkOn: 'manual',
});

Return	Description
`order`	Current order: `order[i]` = original index at position `i`
`reorder`	Move item from old index to new index
`setOrder`	Set full order (e.g. for shuffle)
`isCorrect`	`null` = not validated, `true`/`false` = result
`check`	Validate current order
`reset`	Reset with optional initial order

SortList

On this page