# Toolbar

> A row of controls with a single tab stop.

## Examples

### Formatting

```vue
<script setup lang="ts">
const toast = useToast();
const align = ref("left");
const alignments = [
  { label: "Left", value: "left" },
  { label: "Center", value: "center" },
  { label: "Right", value: "right" },
];
const more = [
  { label: "Insert table", value: "table" },
  { label: "Insert image", value: "image" },
];
</script>

<template>
  <UiToolbar label="Formatting">
    <UiTooltip text="Bold" v-slot="{ attrs }">
      <UiIconButton label="Bold" v-bind="attrs"><Icon name="bold" /></UiIconButton>
    </UiTooltip>
    <UiTooltip text="Italic" v-slot="{ attrs }">
      <UiIconButton label="Italic" v-bind="attrs"><Icon name="italic" /></UiIconButton>
    </UiTooltip>
    <UiTooltip text="Underline" v-slot="{ attrs }">
      <UiIconButton label="Underline" v-bind="attrs"><Icon name="underline" /></UiIconButton>
    </UiTooltip>
    <span class="demo-divider" aria-hidden="true" />
    <UiSegmented v-model="align" :options="alignments" label="Alignment" size="small" />
    <span class="demo-divider" aria-hidden="true" />
    <UiMenu :items="more" label="Insert" @select="(v) => toast.info(v)" />
  </UiToolbar>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Accessible name for the toolbar. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Which arrow keys move between controls; also `aria-orientation`. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | Buttons, toggles, menus and other controls. |

## Styling

- Parts (`[data-part="…"]`): `toolbar`
- State attributes: `data-orientation`

## Keyboard

| Keys           | Action                                            |
| -------------- | ------------------------------------------------- |
| `Tab`          | Enter or leave the toolbar                        |
| `←` / `→`      | Previous / next control (`↑` / `↓` when vertical) |
| `Home` / `End` | First / last control                              |

## Accessibility

- Returning to the toolbar focuses the last focused control.
- Text fields keep their arrow keys for the caret.
- Nested widgets (radio groups, tabs, menus) keep their own arrow keys and count as one stop.