UI
← Home

Slot Picker

Select a contiguous range of slots by dragging across them — press the first, drag to the last, release (the calendar "drag to create" gesture). Arrow keys move the selection; Shift+Arrow extends it from the anchor. Try dragging over the time slots below.

  • Axe
  • Name
  • Roving
  • Focus
  • Drag
  • Cancel

Preview

  • 9:00
  • 9:30
  • 10:00
  • 10:30
  • 11:00
  • 11:30

Installation

npx shadcn@latest add https://ui.publictheta.com/r/slot-picker.json

Conformance

Verified against the @publictheta/ui-spec slot-picker 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)
  • Drag — Pointer-drag surfaces don't select text or hijack touch scrolling
  • Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing

See the full conformance matrix across all components.