Toolbar
A row of related controls that the keyboard reaches as one stop and moves through with the arrow keys.
Formatting toolbar
Wrap each control in Toolbar.Item. Tab moves focus into the toolbar once, and the left and right arrow keys move between items, wrapping at the ends. Toolbar.Separator divides groups of actions.
Pass disabled to Toolbar.Item rather than to the button inside it, so the arrow keys skip the item. For on and off controls, set aria-pressed on the button.
Bulk actions
Toolbar.Root is unstyled apart from a small gap, so it can sit on any surface. Here it fills a card that appears while table rows are selected. Plain text, such as the selection count, can sit between items without joining the arrow-key sequence.
With a text field
Toolbar.Field adds an Input to the arrow-key sequence. While the field has focus, the left and right arrow keys move the caret first and only leave the field from its start or end.
Toolbar.Root Properties
Accessible name of the toolbar, such as Text formatting.
Which arrow keys move focus. It does not change the layout.
Default: horizontal
Whether arrow-key focus wraps from the last item to the first.
Default: true
Reading direction used for left and right arrow keys.
Additional classes for the toolbar. Other div props are passed through.
Toolbar.Item Properties
A single button-like element, usually a Button. It receives the toolbar's focus handling.
Disables the child and removes it from the arrow-key sequence.
Default: false
Toolbar.Field Properties
A single Input. Its own focus, blur and key handlers still run.
Removes the field from the arrow-key sequence.
Default: false
Toolbar.Separator Properties
Additional classes for the vertical divider, such as a taller h-6 next to regular buttons.