Radial Tool Wheel Hotkeys

ProNew

A tool wheel opened from a button, with every tool numbered so the digits 1 to 8 pick it directly, with or without the wheel open, and the current tool shown on the button. Use this when a handful of tools are switched often and should have shortcuts.

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

hotkeys

Guide and examples

When to use it

Use it in editors and games with up to eight tools, where learners use the wheel and regulars press a number.

Do not use it when the tools have mnemonic letters already. Use those as shortcuts in 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 }[]`	-	Up to eight tools; the order sets the numbers.
`value`	`string`	-	The active tool (controlled).
`defaultValue`	`string`	first tool	Initial tool.
`onValueChange`	`(id: string) => void`	-	Runs when a tool is chosen.
`hotkeys`	`boolean`	`true`	Listen for the digits while focus is inside the component.

Accessibility

The button has aria-haspopup="menu" and aria-keyshortcuts="1 2 3 4 5 6 7 8"; the wheel is a menu of menuitemradio items named with their number and label.
Digit keys work when focus is on the button or inside the wheel and ignore digits typed into other fields.
Choosing a tool announces Tool: Pen and closes the wheel, returning focus to the button.
Numbers are text on each tool, so they are visible and read aloud.

Testing

The pattern ships with a Testing Library test (radial-tool-wheel-hotkeys.test.tsx) that covers opening, digits choosing with the wheel closed and open, arrow navigation and the announcement.