Sortable Chip Selection

ProNew

A chosen-items row where order matters: chips move with Alt+Arrow keys or Move buttons, and the new position is announced. Use this when people pick several items and decide their priority or sequence.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it for ranked choices, column order, a pipeline of steps and the order of fallbacks, where the sequence is part of the value.

Do not use it when order carries no meaning. Use plain chips, which are simpler to operate.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	Everything that can be chosen.
`value`	`string[]`	-	The chosen values, in order (controlled).
`defaultValue`	`string[]`	`[]`	Initial values.
`onValueChange`	`(value: string[]) => void`	-	Runs on every add, remove and move.
`label`	`string`	`Selected items`	Names the list.

Accessibility

The chips are a list of listitems named by label, each chip with an aria-label that includes its position (1 of 3: Alpha).
Alt+Arrow keys and the Move earlier / Move later buttons do the same; both announce the new position in a role="status" line.
Delete or Backspace on a chip removes it and moves focus to its neighbour.
The edge chips have the matching Move button disabled.

Testing

The pattern ships with a Testing Library test (sortable-chip-selection.test.tsx) that covers Alt+Arrow moving, the edges, removal with focus moving to a neighbour and adding from the list.

Guide and examples

When to use it

Use it for ranked choices, column order, a pipeline of steps and the order of fallbacks, where the sequence is part of the value.

Do not use it when order carries no meaning. Use plain chips, which are simpler to operate.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	Everything that can be chosen.
`value`	`string[]`	-	The chosen values, in order (controlled).
`defaultValue`	`string[]`	`[]`	Initial values.
`onValueChange`	`(value: string[]) => void`	-	Runs on every add, remove and move.
`label`	`string`	`Selected items`	Names the list.

Accessibility

The chips are a list of listitems named by label, each chip with an aria-label that includes its position (1 of 3: Alpha).
Alt+Arrow keys and the Move earlier / Move later buttons do the same; both announce the new position in a role="status" line.
Delete or Backspace on a chip removes it and moves focus to its neighbour.
The edge chips have the matching Move button disabled.

Testing

The pattern ships with a Testing Library test (sortable-chip-selection.test.tsx) that covers Alt+Arrow moving, the edges, removal with focus moving to a neighbour and adding from the list.