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

Rank these aspects of Physical Wellness by preference.

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

Rank these aspects of Physical Wellness by preference.

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

Rank these aspects of Physical Wellness by preference.

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

Rank these aspects of Physical Wellness by preference.

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

Rank these aspects of Physical Wellness by preference.

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

Rank these aspects of Physical Wellness by preference.

Disabled Items can't be dragged or reordered. Muted styling makes the inactive state clear.
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
  • The starting order is a valid answer. Users can submit without reordering — reordering is optional.
  • On submit, the current order of the list is recorded, whether or not the user changed it.
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)
  • Optional guidance shown below the list (e.g. how to reorder, or validation feedback).
  • Recommended max: 150 characters.
1

Rank these aspects of Physical Wellness by preference.

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.