Skip to main content

Ranking

Allows users to order a list of items by preference or priority via drag interaction. Use in survey or consultation contexts where relative ordering is the required input. Don't use for lists longer than 7–10 items.

Figma Storybook Docs

Description

What it does

Presents a list of items that participants can reorder by dragging to reflect their ranked preference or priority. Each item displays its current position number alongside its label.

Where it appears

Community consultation surveys in Social Point (e.g. budget priority exercises, strategic planning input). Less commonly in Open Point admin interfaces for configuring display order of survey options or report categories.

Why it exists

Many government engagement exercises ask residents to rank priorities — infrastructure spending, service improvements, planning options — rather than simply select one. A drag-to-rank control captures nuanced preference data that radio buttons or checkboxes cannot.

Dependencies

Radio Button, Checkbox, Validation Message

Anatomy

PartRequired?Notes
List container Required Wraps all rankable items. Has a visible boundary and accessible ARIA list role. Manages drag state and announces reorder events to screen readers.
Rank item Required Individual row containing the drag handle, position badge, and item label. Minimum height 48px to meet touch target requirements.
Drag handle Required Icon affordance (typically a six-dot grip) on the leading edge of each row. Communicates draggability. Must have its own focusable target and keyboard instructions.
Position badge Required Numeric label showing the item's current rank (1, 2, 3…). Updates live as items are reordered. Communicates current state to all users including screen reader users.
Item label Required Plain text description of the option being ranked. Should be concise — ideally under 60 characters — to avoid wrapping inside the constrained row.
Field label Recommended Heading above the list explaining the ranking task (e.g. 'Rank these priorities from most to least important'). Should set clear expectations about how many items are shown.
Helper text Optional Secondary instruction below the field label, e.g. 'Drag items or use arrow keys to reorder'. Particularly important because many users are unfamiliar with drag-to-rank controls.
Validation message Optional Error or success feedback displayed below the list. Required when the field is mandatory in a form.

Variants

Default

Standard drag-to-rank list with visible handles and position badges.

Use in most consultation and survey contexts where participants need to express preference order across a full set of options.

Top-N only

Participant ranks only the top N items from a longer list (e.g. pick and rank your top 3 from 8 options).

Use when requiring a full ranking of all items would create excessive cognitive load. Makes the task more manageable while still capturing priority signal.

Read-only

Displays a completed or locked ranking without interactive controls. Handles are hidden; position badges remain visible.

Use to show a participant their previously submitted ranking in a review step, or to display aggregate results in a results summary.

States

State Behaviour
Default All items are shown in their initial order (typically randomised to avoid order bias). Drag handles are visible. No item is active.
Hover The hovered rank item and its drag handle receive a subtle background highlight using --op-color-bg-secondary. The cursor changes to grab.
Dragging The item being dragged appears elevated (box-shadow token) and semi-transparent (opacity 0.85). A drop target indicator — a 2px line in --op-color-interactive-default — shows where the item will land.
Keyboard focused The focused item receives a 3px focus ring in --op-color-interactive-focus. Arrow key instructions are surfaced via helper text or a live region announcement on first focus.
Reordered After a drop or keyboard move, the position badges update immediately. A live region announces the new position to screen readers (e.g. 'Parks moved to position 2 of 5').
Disabled All items are non-interactive. Drag handles are hidden or visually muted using --op-color-text-disabled. The list retains its current order but cannot be changed.
Error A validation message appears below the list with --op-color-status-error styling. The list container border changes to --op-color-status-error. Used when the field is required and the participant has not completed the ranking.
Read-only Items are displayed in their final order without drag handles. Position badges remain. No interactive affordances are shown.

Usage guidelines

When to use

  • Community consultation surveys asking residents to prioritise competing budget allocations, infrastructure projects, or service improvements.
  • Strategic planning input where stakeholders must rank objectives or themes by importance.
  • Configuration screens where an admin sets the display order of survey options or report categories (Open Point).
  • When the research question specifically requires ranked preference data, not just selection or rating.

When not to use

  • Lists of more than 7–10 items — the cognitive load becomes too high and rankings become unreliable. Consider grouping, filtering, or a dot-voting approach instead.
  • When participants only need to select one best option — use radio buttons instead.
  • When all options are equally acceptable and order does not matter — use a checkbox group instead.
  • When the participant should weight items numerically — use a rating scale or slider instead.
  • Mobile-first public surveys where drag interaction is unreliable on touch — ensure keyboard and button-based reorder alternatives are always present.

Do / Don't

Do

Randomise the initial order of items across participants to prevent order bias in aggregated results.

Don't

Present items in a fixed order (alphabetical or logical) that may systematically influence responses.

Do

Limit the list to 5–7 items for public-facing surveys where participants may have low digital literacy.

Don't

Ask participants to rank 10+ items in a single list, particularly in a community engagement context.

Do

Provide explicit written instructions — 'Drag items or use the arrow keys' — in helper text above the list.

Don't

Assume participants will discover the drag interaction without prompting.

Do

Always provide a keyboard-operable reorder mechanism (arrow keys or up/down buttons) as a full alternative to drag.

Don't

Rely solely on drag-and-drop — this excludes keyboard-only users and many mobile users.

Do

Announce position changes to screen readers using a live region after each reorder action.

Don't

Silently update the visual order without a corresponding accessible notification.

Related: Checkbox Group, Radio Button Group, Range Slider, Validation Message

Was this page helpful?

Updated 9 September 2026