---
url: "https://vueda.dev/v3/reference/theming/keys/ToggleGroup.md"
title: "ToggleGroup"
---

# ToggleGroup

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The row layout for a set of [ToggleGroupItem.root](/v3/reference/theming/keys/ToggleGroupItem.md#theme-key-ToggleGroupItem-root) children. The `--gap` custom property is driven by the consumer's `spacing` prop, which lets the same group render as a gapped row or (at `spacing=0`) as a segmented control where child items drop their outer radii and shared borders. The `group/toggle-group` Tailwind group label lets items react to group-level state.

Vue component: [ToggleGroup](/v3/reference/api/vue/ToggleGroup.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ToggleGroup.md#theme-key-ToggleGroup-root) | `group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-vueda-control` | The row layout for a set of [ToggleGroupItem.root](/v3/reference/theming/keys/ToggleGroupItem.md#theme-key-ToggleGroupItem-root) children. The `--gap` custom property is driven by the consumer's `spacing` prop, which lets the same group render as a gapped row or (at `spacing=0`) as a segmented control where child items drop their outer radii and shared borders. The `group/toggle-group` Tailwind group label lets items react to group-level state. |

<a id="theme-key-ToggleGroup-root"></a>

## root

> The row layout for a set of [ToggleGroupItem.root](/v3/reference/theming/keys/ToggleGroupItem.md#theme-key-ToggleGroupItem-root) children. The `--gap` custom property is driven by the consumer's `spacing` prop, which lets the same group render as a gapped row or (at `spacing=0`) as a segmented control where child items drop their outer radii and shared borders. The `group/toggle-group` Tailwind group label lets items react to group-level state.

Default classes:

`group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-vueda-control`

Source: `client/lib/theme/vueda-tailwind/controls/ToggleGroup.theme.js:16`