# Toolbar A row of buttons, links and controls behind a single tab stop. Toolbar gathers buttons, links and controls into one group that the keyboard enters once, with the arrow keys moving between the items inside it. Useful for a formatting bar above an editor, or anywhere a cluster of controls would otherwise cost a keyboard user one `Tab` each. ::component-preview{name="ToolbarPreview"} ```vue ``` :: ## Usage guidelines - Give `Toolbar.Root` an `aria-label`, since a screen reader announces the toolbar by that name before it announces anything inside it. - Keep every item inside `Toolbar.Root`. The arrow-key order is the root’s own subtree, so an item rendered elsewhere has nothing to move within, even when it carries the toolbar’s `id`. - The toolbar does not decide what a button does. Bold, italic and the rest keep their own pressed state and their own `aria-pressed`, as the demo above does. - Use at most one `Toolbar.Input` in a horizontal toolbar, and put it last, since the left and right arrow keys have to be shared between the caret and the toolbar. ## Anatomy Assemble the parts inside one root. ::component-anatomy --- parts: - name: Toolbar.Root required: true description: 'Renders a
and owns the single tab stop.' children: - name: Toolbar.Button description: 'Renders a