Ranking

The Ranking field lets users order a list of options by importance or preference. Users can drag items into a new position or pick a rank from the badge dropdown; the rank numbers update automatically.

Default

Which aspects of Physical Wellness interest you?

Drag an item, or use the number badge, to change its rank.
States

Which aspects of Physical Wellness interest you?

Default Items are shown in their starting order. Each row includes a rank badge, label, and drag handle.

Which aspects of Physical Wellness interest you?

Dragging The item being dragged is elevated and highlighted. The other items shift up or down to make space for it.

Which aspects of Physical Wellness interest you?

Reordered Shown after an item is dropped into a new position. The rank numbers update automatically to match the new order.

Which aspects of Physical Wellness interest you?

Hover When the cursor is over an item, its border darkens to signal that the item can be picked up and moved.

Which aspects of Physical Wellness interest you?

Disabled Items can't be dragged or reordered. Muted styling makes the inactive state clear.

Which aspects of Physical Wellness interest you?

Please rank every item before submitting.
Error Shown when the ranking fails validation (e.g. the user hasn't interacted yet). The item borders turn red and an error message appears below the list.

Which aspects of Physical Wellness interest you?

Thanks — your ranking has been recorded.
Valid Confirms the ranking has been completed and passes validation.
Behaviour
Drag and drop
  • Users pick up an item by its drag handle and drop it into a new position.
  • The other items shift up or down to make space as the item is dragged.
  • Users can also assign a rank directly by clicking the number badge and choosing a position from the dropdown.
Auto-reordering
  • Once an item is dropped, every rank number updates automatically to reflect the new order.

Before

After

Validation
  • If the ranking is required, users must reorder at least one item before they can submit.
  • An inline error message appears below the list if validation fails.
Specs
1
Label
  • States the question or instruction the user is responding to.
  • Should make the ranking criterion explicit (e.g. "by importance", "by preference").
  • Positioned above the component list.
  • Recommended max: 80 characters.
2
Rank indicator
  • Shows the item's current rank.
  • Automatically updates when items are reordered.
  • Doubles as a quick-pick dropdown, so users can assign a rank without dragging.
3
Option labels
  • Describes each option being ranked. Keep labels short so they sit on a single line.
  • Recommended max: 60 characters.
  • Maximum of 10 options per ranking.
4
Drag handle
  • Sits on the right edge of each item.
  • Signals that the item can be picked up and dropped into a new position.
5
Helper text
  • Optional guidance shown below the list (e.g. how to reorder, or validation feedback).
  • Recommended max: 150 characters.
1

Which aspects of Physical Wellness interest you?

5 Drag an item, or use the number badge, to change its rank.
Dos and Don'ts
  1. Keep lists short and easy to compare — aim for 3–7 options (10 maximum).
  2. Use short, scannable option labels so users can compare and rank quickly.
  3. Avoid long or complex labels that wrap onto multiple lines — they make comparison harder.
  4. Make the ranking criterion explicit in the question (e.g. "by importance", "by preference") so users know what they're sorting against.
  5. Don't use Ranking when users only need to pick one option — use radio buttons or a dropdown instead.
  6. Don't use Ranking when the order doesn't matter to the outcome — use checkboxes for unordered multi-select.