Component

A container for a set of controls, such as text formatting options. The toolbar is one tab stop and arrow keys move between its items.

preview

React
"use client";

import React, { useState } from "react";
import Toolbar from "@radui/ui/Toolbar";
import { Bold, Italic, Underline } from "lucide-react";

const ToolbarExample = () => {
    const [textStyles, setTextStyles] = useState(["bold"])

    return (
        <Toolbar.Root aria-label="Formatting options">
            <Toolbar.ToggleGroup type="multiple" value={textStyles} onValueChange={setTextStyles}>
                <Toolbar.ToggleItem value="bold" aria-label="Bold">
                    <Bold size={16} />
                </Toolbar.ToggleItem>
                <Toolbar.ToggleItem value="italic" aria-label="Italic">
                    <Italic size={16} />
                </Toolbar.ToggleItem>
                <Toolbar.ToggleItem value="underline" aria-label="Underline">
                    <Underline size={16} />
                </Toolbar.ToggleItem>
            </Toolbar.ToggleGroup>
        </Toolbar.Root>
    )
}

export default ToolbarExample

Features

The whole toolbar is a single tab stop, with arrow keys moving between items
Single or multiple selection toggle groups
Separator orientation inferred from the toolbar's orientation
Horizontal and vertical orientations

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Toolbar from "@radui/ui/Toolbar";

export default () => {
    return (
        <Toolbar.Root aria-label="Formatting options">
            <Toolbar.ToggleGroup type="multiple" defaultValue={["bold"]}>
                <Toolbar.ToggleItem value="bold" aria-label="Bold">B</Toolbar.ToggleItem>
                <Toolbar.ToggleItem value="italic" aria-label="Italic">I</Toolbar.ToggleItem>
            </Toolbar.ToggleGroup>
            <Toolbar.Separator />
            <Toolbar.Link href="#">Link</Toolbar.Link>
        </Toolbar.Root>
    )
}

Root

The toolbar container. Renders a toolbar role and manages roving focus across its items.

Prop	Type	Default
aria-label	string	--
orientation	"horizontal" \| "vertical"	"horizontal"
loop	boolean	false
dir	"ltr" \| "rtl"	"ltr"
className	string	--
asChild	boolean	false

ToggleGroup

Groups toggle items so only one or many can be pressed at a time.

Prop	Type	Default
type	"single" \| "multiple"	"single"
value	any	--
defaultValue	any	[]
onValueChange	(value: any) => void	--
disabled	boolean	false

ToggleItem

A pressable item inside a ToggleGroup. Must be rendered within Toolbar.ToggleGroup.

Prop	Type	Default
value	any	required
aria-label	string	--
disabled	boolean	false
className	string	--

Button

An action button inside the toolbar. Must be rendered within Toolbar.Root.

Prop	Type	Default
aria-label	string	--
className	string	--
asChild	boolean	false
disabled	boolean	false

Link

A link inside the toolbar. Part of the toolbar's single tab stop.

Prop	Type	Default
href	string	"#"
aria-label	string	--
className	string	--
asChild	boolean	false

Separator

A visual divider between toolbar groups. Defaults to the opposite orientation of the toolbar.

Prop	Type	Default
orientation	"horizontal" \| "vertical"	inferred
className	string	--

Keyboard Interactions

Shortcut	Description
`ArrowRight`	Moves focus to the next item in a horizontal toolbar.
`ArrowDown`	Moves focus to the next item in a vertical toolbar.
`Space`	Toggles the focused item.
`Enter`	Toggles the focused item.

ARIA References

Reference	What Rad UI follows
Button pattern	Buttons and toggle items are native buttons. In a multiple ToggleGroup (role="group") items expose aria-pressed; in a single ToggleGroup (role="radiogroup") items are role="radio" with aria-checked. The toolbar carries an accessible name via aria-label.