UI
← Home

Listbox

A multi-select listbox with the file-manager selection model: plain click selects one, Cmd/Ctrl-click toggles, Shift-click selects a range. Arrow keys move the selection, Shift+Arrow extends it, and Ctrl/Cmd+A selects all.

  • Axe
  • Name
  • Roving
  • Focus
  • Select
  • Copy
  • Open

Preview

  • Apple
  • Banana
  • Cherry
  • Date

Installation

npx shadcn@latest add https://ui.publictheta.com/r/listbox.json

Conformance

Verified against the @publictheta/ui-spec listbox specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Name — The widget container exposes an accessible name
  • Roving — Exactly one tab stop; Arrow keys move within the widget
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Select — The file-manager selection model: Cmd/Ctrl-click toggles, Shift-click extends from the anchor, Cmd/Ctrl+A selects all and again clears, Escape clears, and the count is announced
  • Copy — Cmd/Ctrl+C puts what is selected on the clipboard in every flavour the widget promises — and a touch device, which has no command key, can do the same thing with a control
  • Open — Enter, or a double click, opens the item and says which — and a plain click only selects it, which is the other half of the guarantee

See the full conformance matrix across all components.