---
title: Toggle Group
description: A set of two-state buttons that can be toggled on or off.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"
)

templ ToggleGroupDemo() {
	@togglegroup.ToggleGroup(togglegroup.Props{
		Variant: togglegroup.VariantOutline,
		ToggleMultiple: true,
	}) {
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "bold",
			Attributes: templ.Attributes{"aria-label": "Toggle bold"},
		}) {
			@icon.Bold()
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "italic",
			Attributes: templ.Attributes{"aria-label": "Toggle italic"},
		}) {
			@icon.Italic()
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "strikethrough",
			Attributes: templ.Attributes{"aria-label": "Toggle strikethrough"},
		}) {
			@icon.Underline()
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add toggle-group
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="toggle-group" title="components/togglegroup/togglegroup.templ" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/togglegroup"
```

```templ showLineNumbers
@togglegroup.ToggleGroup(togglegroup.Props{}) {
	@togglegroup.Item(togglegroup.ItemProps{Value: "a"}) {
		A
	}
	@togglegroup.Item(togglegroup.ItemProps{Value: "b"}) {
		B
	}
	@togglegroup.Item(togglegroup.ItemProps{Value: "c"}) {
		C
	}
}
```

## Composition

Use the following composition to build a `ToggleGroup`:

```text
togglegroup.ToggleGroup
├── togglegroup.Item
└── togglegroup.Item
```

## Outline

Use `Variant: togglegroup.VariantOutline` for an outline style.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"
)

templ ToggleGroupOutline() {
	@togglegroup.ToggleGroup(togglegroup.Props{
		Variant: togglegroup.VariantOutline,
			}) {
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "all",
			Pressed:    true,
			Attributes: templ.Attributes{"aria-label": "Toggle all"},
		}) {
			All
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "missed",
			Attributes: templ.Attributes{"aria-label": "Toggle missed"},
		}) {
			Missed
		}
	}
}
```

## Size

Use the `Size` prop to change the size of the toggle group.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"
)

templ ToggleGroupSize() {
	<div class="flex flex-col gap-4">
		@togglegroup.ToggleGroup(togglegroup.Props{
						Size:    togglegroup.SizeSm,
			Variant: togglegroup.VariantOutline,
		}) {
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "top",
				Pressed:    true,
				Attributes: templ.Attributes{"aria-label": "Toggle top"},
			}) {
				Top
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "bottom",
				Attributes: templ.Attributes{"aria-label": "Toggle bottom"},
			}) {
				Bottom
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "left",
				Attributes: templ.Attributes{"aria-label": "Toggle left"},
			}) {
				Left
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "right",
				Attributes: templ.Attributes{"aria-label": "Toggle right"},
			}) {
				Right
			}
		}
		@togglegroup.ToggleGroup(togglegroup.Props{
						Variant: togglegroup.VariantOutline,
		}) {
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "top",
				Pressed:    true,
				Attributes: templ.Attributes{"aria-label": "Toggle top"},
			}) {
				Top
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "bottom",
				Attributes: templ.Attributes{"aria-label": "Toggle bottom"},
			}) {
				Bottom
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "left",
				Attributes: templ.Attributes{"aria-label": "Toggle left"},
			}) {
				Left
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "right",
				Attributes: templ.Attributes{"aria-label": "Toggle right"},
			}) {
				Right
			}
		}
	</div>
}
```

## Spacing

Use `Spacing` to add spacing between toggle group items.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"
	"github.com/axadrn/shadcn-templ/v2/utils"
)

templ ToggleGroupSpacing() {
	@togglegroup.ToggleGroup(togglegroup.Props{
				Size:    togglegroup.SizeSm,
		Variant: togglegroup.VariantOutline,
		Spacing: utils.Ptr(2),
	}) {
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "top",
			Pressed:    true,
			Attributes: templ.Attributes{"aria-label": "Toggle top"},
		}) {
			Top
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "bottom",
			Attributes: templ.Attributes{"aria-label": "Toggle bottom"},
		}) {
			Bottom
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "left",
			Attributes: templ.Attributes{"aria-label": "Toggle left"},
		}) {
			Left
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "right",
			Attributes: templ.Attributes{"aria-label": "Toggle right"},
		}) {
			Right
		}
	}
}
```

## Vertical

Use `Orientation: togglegroup.OrientationVertical` for vertical toggle groups.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"
	"github.com/axadrn/shadcn-templ/v2/utils"
)

templ ToggleGroupVertical() {
	@togglegroup.ToggleGroup(togglegroup.Props{
		ToggleMultiple: true,
		Orientation: togglegroup.OrientationVertical,
		Spacing:     utils.Ptr(1),
	}) {
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "bold",
			Pressed:    true,
			Attributes: templ.Attributes{"aria-label": "Toggle bold"},
		}) {
			@icon.Bold()
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "italic",
			Pressed:    true,
			Attributes: templ.Attributes{"aria-label": "Toggle italic"},
		}) {
			@icon.Italic()
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "underline",
			Attributes: templ.Attributes{"aria-label": "Toggle underline"},
		}) {
			@icon.Underline()
		}
	}
}
```

## Disabled

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"
)

templ ToggleGroupDisabled() {
	@togglegroup.ToggleGroup(togglegroup.Props{ToggleMultiple: true}) {
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "bold",
			Disabled:   true,
			Attributes: templ.Attributes{"aria-label": "Toggle bold"},
		}) {
			@icon.Bold()
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "italic",
			Disabled:   true,
			Attributes: templ.Attributes{"aria-label": "Toggle italic"},
		}) {
			@icon.Italic()
		}
		@togglegroup.Item(togglegroup.ItemProps{
			Value:      "strikethrough",
			Disabled:   true,
			Attributes: templ.Attributes{"aria-label": "Toggle strikethrough"},
		}) {
			@icon.Underline()
		}
	}
}
```

## Custom

A custom toggle group example.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/togglegroup"
	"github.com/axadrn/shadcn-templ/v2/utils"
)

templ ToggleGroupCustom() {
	@field.Field(field.Props{Class: "max-w-xs"}) {
		@field.Label() {
			Font Weight
		}
		@togglegroup.ToggleGroup(togglegroup.Props{
			ID:      "font-weight-group",
						Variant: togglegroup.VariantOutline,
			Size:    togglegroup.SizeLg,
			Spacing: utils.Ptr(2),
		}) {
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "light",
				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",
				Attributes: templ.Attributes{"aria-label": "Light"},
			}) {
				<span class="text-2xl leading-none font-light">Aa</span>
				<span class="text-xs text-muted-foreground">Light</span>
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "normal",
				Pressed:    true,
				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",
				Attributes: templ.Attributes{"aria-label": "Normal"},
			}) {
				<span class="text-2xl leading-none font-normal">Aa</span>
				<span class="text-xs text-muted-foreground">Normal</span>
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "medium",
				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",
				Attributes: templ.Attributes{"aria-label": "Medium"},
			}) {
				<span class="text-2xl leading-none font-medium">Aa</span>
				<span class="text-xs text-muted-foreground">Medium</span>
			}
			@togglegroup.Item(togglegroup.ItemProps{
				Value:      "bold",
				Class:      "flex size-16 flex-col items-center justify-center rounded-xl",
				Attributes: templ.Attributes{"aria-label": "Bold"},
			}) {
				<span class="text-2xl leading-none font-bold">Aa</span>
				<span class="text-xs text-muted-foreground">Bold</span>
			}
		}
		@field.Description() {
			Use <code id="font-weight-code" class="rounded-md bg-muted px-1 py-0.5 font-mono">font-normal</code> to set the font weight.
		}
	}
	<script nonce={ templ.GetNonce(ctx) }>
		(() => {
			const group = document.getElementById("font-weight-group");
			const code = document.getElementById("font-weight-code");
			group.addEventListener("toggle-change", () => {
				const value = group.getAttribute("data-tui-toggle-group-value");
				if (value) code.textContent = "font-" + value;
			});
		})();
	</script>
}
```

## API Reference

### ToggleGroup

The `togglegroup.ToggleGroup` component wraps its items into a single or multiple selection group.

| Prop          | Type                                          | Default      |
| ------------- | --------------------------------------------- | ------------ |
| `ToggleMultiple` | `bool` | `false` |
| `Variant`     | `VariantDefault \| VariantOutline`            | `default`    |
| `Size`        | `SizeDefault \| SizeSm \| SizeLg`             | `default`    |
| `Spacing`     | `*int`                                        | `0`          |
| `Orientation` | `OrientationHorizontal \| OrientationVertical` | `horizontal` |
| `Disabled`    | `bool`                                        | `false`      |
| `Class`       | `string`                                      | -            |