---
title: Toggle
description: A two-state button that can be either on or off.
---

```templ
package examples

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

templ ToggleDemo() {
	@toggle.Toggle(toggle.Props{
		Variant:    toggle.VariantOutline,
		Size:       toggle.SizeSm,
		Attributes: templ.Attributes{"aria-label": "Toggle bookmark"},
	}) {
		@icon.Bookmark(icon.Props{Class: "group-aria-pressed/toggle:fill-foreground"})
		Bookmark
	}
}
```

## Installation

<CodeTabs>

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

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

</TabsContent>

<TabsContent value="manual">

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

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

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

<ComponentSource name="toggle" title="components/toggle/toggle.js" />

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/toggle"
```

```templ showLineNumbers
@toggle.Toggle() {
	Toggle
}
```

## Outline

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

```templ
package examples

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

templ ToggleOutline() {
	<div class="flex flex-wrap items-center gap-2">
		@toggle.Toggle(toggle.Props{
			Variant:    toggle.VariantOutline,
			Attributes: templ.Attributes{"aria-label": "Toggle italic"},
		}) {
			@icon.Italic()
			Italic
		}
		@toggle.Toggle(toggle.Props{
			Variant:    toggle.VariantOutline,
			Attributes: templ.Attributes{"aria-label": "Toggle bold"},
		}) {
			@icon.Bold()
			Bold
		}
	</div>
}
```

## With Text

```templ
package examples

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

templ ToggleText() {
	@toggle.Toggle(toggle.Props{
		Attributes: templ.Attributes{"aria-label": "Toggle italic"},
	}) {
		@icon.Italic()
		Italic
	}
}
```

## Size

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

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/toggle"

templ ToggleSizes() {
	<div class="flex flex-wrap items-center gap-2">
		@toggle.Toggle(toggle.Props{
			Variant:    toggle.VariantOutline,
			Size:       toggle.SizeSm,
			Attributes: templ.Attributes{"aria-label": "Toggle small"},
		}) {
			Small
		}
		@toggle.Toggle(toggle.Props{
			Variant:    toggle.VariantOutline,
			Size:       toggle.SizeDefault,
			Attributes: templ.Attributes{"aria-label": "Toggle default"},
		}) {
			Default
		}
		@toggle.Toggle(toggle.Props{
			Variant:    toggle.VariantOutline,
			Size:       toggle.SizeLg,
			Attributes: templ.Attributes{"aria-label": "Toggle large"},
		}) {
			Large
		}
	</div>
}
```

## Disabled

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/toggle"

templ ToggleDisabled() {
	<div class="flex flex-wrap items-center gap-2">
		@toggle.Toggle(toggle.Props{
			Disabled:   true,
			Attributes: templ.Attributes{"aria-label": "Toggle disabled"},
		}) {
			Disabled
		}
		@toggle.Toggle(toggle.Props{
			Variant:    toggle.VariantOutline,
			Disabled:   true,
			Attributes: templ.Attributes{"aria-label": "Toggle disabled outline"},
		}) {
			Disabled
		}
	</div>
}
```

## API Reference

### Toggle

The `Toggle` component renders a pressable two-state button.

| Prop       | Type                                    | Default   |
| ---------- | --------------------------------------- | --------- |
| `Pressed`  | `bool`                                  | `false`   |
| `Value`    | `string`                                | -         |
| `Variant`  | `VariantDefault \| VariantOutline`      | `default` |
| `Size`     | `SizeDefault \| SizeSm \| SizeLg`       | `default` |
| `Disabled` | `bool`                                  | `false`   |
| `Class`    | `string`                                | -         |