Pie Menu Hold Key Gesture

ProNew

A canvas where holding Space opens a ring of tools at the pointer and releasing it over a wedge chooses that tool; a quick tap of Space keeps the ring open for arrow keys and Enter. Use this when experts switch tools without moving the mouse.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

holdMs220

size180

Guide and examples

When to use it

Use it in drawing, diagram and map tools, where switching tools many times a minute is the main cost and holding a key while flicking the pointer is the fastest route.

Do not use it when the tool set is large or rarely used. Use a toolbar.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`tools`	`{ id, label, icon }[]`	-	The tools in the ring and the toolbar.
`value`	`string`	-	The active tool (controlled).
`defaultValue`	`string`	first tool	Initial tool.
`onValueChange`	`(id: string) => void`	-	Runs when a tool is chosen.
`holdMs`	`number`	`220`	A press shorter than this is a tap.
`size`	`number`	`180`	Ring diameter in pixels.

Accessibility

The canvas is focusable (tabindex=0) and described by Hold Space to open the tool ring; a normal toolbar of aria-pressed buttons offers the same tools.
A long press chooses on release by the pointer's angle from the centre (inside the middle chooses nothing); a tap of Space keeps the ring open as a menu with arrow keys and Enter.
Tool changes are announced: Tool: Pen.
The ring is cancelled by Escape or by releasing in the centre.

Testing

The pattern ships with a Testing Library test (pie-menu-hold-key-gesture.test.tsx) that covers hold and release choosing by angle, tap keeping the ring open for the keyboard, cancelling and the toolbar.