Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Toolbar Roving Editor

ProNew

A formatting toolbar that is one Tab stop with Arrow, Home and End movement, grouped and separated buttons, pressed toggles and a single-choice alignment group.

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.

bold, italic

Guide and examples

When to use it

Use this for editor and canvas toolbars with four or more controls, so keyboard users are not forced through each one.

Do not use it for two or three buttons (plain buttons are fine) or for navigation. Do not put form fields inside: text fields need the arrow keys themselves.

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.

Log in Get Pro for $35

Props

ToolbarRovingEditor

Prop	Type	Default	Description
`bold, italic`	`boolean`	-	Pressed states.
`align`	`left \| center \| right`	-	Chosen alignment.
`onBoldChange, onItalicChange, onAlignChange`	`fn`	-	Change handlers.
`onInsertLink`	`() => void`	-	The Link button.

Accessibility

Built on @radix-ui/react-toolbar: role="toolbar" with a name, roving tabindex, arrow-key movement.
Bold and Italic are a multiple-choice toggle group named "Text style"; alignment is a single-choice toggle group named "Alignment".
Without a toolbar every icon button is its own Tab stop; with it, ten buttons cost one Tab.

Keyboard

Key	Action
Tab	enters and leaves the toolbar as one stop
ArrowLeft / ArrowRight	move between buttons
Home / End	first / last button
Space or Enter	activates a button

Testing

The pattern ships a Testing Library test (toolbar-roving-editor.test.tsx) that covers the named toolbar and its single Tab stop, arrow movement, toggles and the alignment group.