All specs
Display · list

List

A vertical sequence of items, each marked by a single character.

Anatomy

• First item
• Second item
• Third item

With descriptions:

→ Authentication — Sign in with email or OAuth
→ Database       — PostgreSQL on Neon
→ Email          — Transactional email via Resend

---

Variants

VariantMarker
bullet (default)
numbered1. 2. 3.
arrow
dash-

The marker is rendered in accent color. The label is in default foreground; descriptions are dim.

---

Options

type ListOptions = {
  items: ReadonlyArray<string | { label: string; description?: string }>
  variant?: 'bullet' | 'numbered' | 'arrow' | 'dash'
  theme?: PartialTheme
}

---

Do & don't

Do

Use lists for 2–10 items the user should scan

Use description only when the label alone is ambiguous

Use numbered when order matters (steps, instructions)

Use arrow when items represent transitions or actions

Don't

Don't use a list for tabular data — use table

Don't use a list for status of named phases — use step

Don't customize the marker characters — Caret owns the bullet/arrow vocabulary

---

Out of scope

Nested lists — use tree

Inline rich formatting — labels are plain strings

Click-to-select — list is non-interactive; for selection use prompt.select