> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Toolbar

A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.

## Features

- Full keyboard navigation.

## Anatomy

Import the component.

```jsx
import { Toolbar } from "@radix-solid/primitives";

export default () => <Toolbar.Root>

		<Toolbar.Button />

		<Toolbar.Separator />

		<Toolbar.Link />

		<Toolbar.ToggleGroup type="single">

			<Toolbar.ToggleItem value="bold" aria-label="Bold" />

		</Toolbar.ToggleGroup>

	</Toolbar.Root>;
```

## API Reference

### Root

Contains all the toolbar component parts.

| Prop                                                                                                                                                                    | Type      | Default        |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false`        |
| `orientation`The orientation of the toolbar.                                                                                                                            | `enum`    | `"horizontal"` |
| `dir`The reading direction of the toolbar. If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode.                          | `enum`    | —              |
| `loop`When `true`, keyboard navigation will loop from last tab to first, and vice versa.                                                                                | `boolean` | `true`         |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### Button

A button item.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### Link

A link item.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### ToggleGroup

A set of two-state buttons that can be toggled on or off.

| Prop                                                                                                                                                                     | Type       | Default |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.  | `boolean`  | `false` |
| `type*`Determines whether a single or multiple items can be pressed at a time.                                                                                           | `enum`     | —       |
| `value`The controlled value of the pressed item when `type` is `"single"`. Must be used in conjunction with `onValueChange`.                                             | `string`   | —       |
| `defaultValue`The value of the item to show as pressed when initially rendered and `type` is `"single"`. Use when you do not need to control the state of the items.     | `string`   | —       |
| `onValueChange`Event handler called when the pressed state of an item changes and `type` is `"single"`.                                                                  | `function` | —       |
| `value`The controlled value of the pressed items when `type` is `"multiple"`. Must be used in conjunction with `onValueChange`.                                          | `string[]` | `[]`    |
| `defaultValue`The values of the items to show as pressed when initially rendered and `type` is `"multiple"`. Use when you do not need to control the state of the items. | `string[]` | `[]`    |
| `onValueChange`Event handler called when the pressed state of an item changes and `type` is `"multiple"`.                                                                | `function` | —       |
| `disabled`When `true`, prevents the user from interacting with the toggle group and all its items.                                                                       | `boolean`  | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### ToggleItem

An item in the group.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `value*`A unique value for the item.                                                                                                                                    | `string`  | —       |
| `disabled`When `true`, prevents the user from interacting with the item.                                                                                                | `boolean` | —       |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"on" \| "off"`              |
| `[data-disabled]`    | Present when disabled        |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### Separator

Used to visually separate items in the toolbar.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

## Examples

### Use with other primitives

All our primitives which expose a `Trigger` part, such as `Dialog`, `AlertDialog`, `Popover`, `DropdownMenu` can be composed within a toolbar by using the [`asChild` prop](/primitives/docs/guides/composition).

Here is an example using our `DropdownMenu` primitive.

```jsx
import { Toolbar, DropdownMenu } from "@radix-solid/primitives";

export default () => <Toolbar.Root>

		<Toolbar.Button>Action 1</Toolbar.Button>

		<Toolbar.Separator />

		<DropdownMenu.Root>

			<Toolbar.Button asChild>{target => target(DropdownMenu.Trigger, {

        children: <>Trigger</>

      })}</Toolbar.Button>

			<DropdownMenu.Content>…</DropdownMenu.Content>

		</DropdownMenu.Root>

	</Toolbar.Root>;
```

## Accessibility

Uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among items.

### Keyboard Interactions

| Key          | Description                                                  |
| ------------ | ------------------------------------------------------------ |
| `Tab`        | Moves focus to the first item in the group.                  |
| `Space`      | Activates/deactivates the item.                              |
| `Enter`      | Activates/deactivates the item.                              |
| `ArrowDown`  | Moves focus to the next item depending on `orientation`.     |
| `ArrowRight` | Moves focus to the next item depending on `orientation`.     |
| `ArrowUp`    | Moves focus to the previous item depending on `orientation`. |
| `ArrowLeft`  | Moves focus to the previous item depending on `orientation`. |
| `Home`       | Moves focus to the first item.                               |
| `End`        | Moves focus to the last item.                                |