Ranker

The Ranker component (ui:ranker) renders an orderable list for ranking items by preference. Supports keyboard-driven reordering.

Examples

View Glyph Markdown source

```ui:ranker
title: Rank by importance
items:
  - id: auth
    label: Authentication
    description: User login and session management
  - id: dashboard
    label: Dashboard
  - id: api
    label: API Layer
  - id: docs
    label: Documentation
```

Long list

Properties

Property	Type	Required	Default	Description
title	string	No	—	Optional heading.
items	RankerItem[]	Yes	—	Items to rank (min 2).
markdown	boolean	No	false	Enable inline markdown formatting (bold, italic, links, code) in text fields.

RankerItem

Property	Type	Required	Description
id	string	Yes	Unique item identifier.
label	string	Yes	Display label.
description	string	No	Optional description.

Markdown Support

Enable inline markdown formatting in item labels:

View Glyph Markdown source

```ui:ranker
title: Rank by importance
items:
  - id: auth
    label: "**Authentication** System"
  - id: dashboard
    label: "*Analytics* Dashboard"
  - id: api
    label: "`REST API` Layer"
  - id: docs
    label: "[Documentation](https://example.com/docs) Portal"
markdown: true
```

Supported formatting: bold, italic, code, links

Learn more about markdown in components →

Interaction events

Event kind: ranker-reorder

Payload field	Type	Description
orderedItems	Array<{ id, label, rank }>	Full ordered state.
movedItem	{ id, label, fromRank, toRank }	The item that moved.

Accessibility

• Container uses role="listbox", items use role="option".
• Keyboard: Space to grab, Arrow Up/Down to move, Escape to cancel, Space to drop.
• aria-live="assertive" announces grab/drop state.