UI
← Home

Group Move

A canvas of shapes that can be selected and moved together. Click a shape to select it, Ctrl/Cmd-click to add or remove shapes, then use the arrow keys to move every selected shape by the same step — relative geometry is preserved and the group is clamped to the canvas as a whole.

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

Preview

Installation

npx shadcn@latest add https://ui.publictheta.com/r/group-move.json

Conformance

Verified against the @publictheta/ui-spec group-move 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
  • 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.