---
title: Switch
description: A control that allows the user to toggle between checked and not checked.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/label"
	switchcomp "github.com/axadrn/shadcn-templ/v2/components/switch"
)

templ SwitchDemo() {
	<div class="flex items-center space-x-2">
		@switchcomp.Switch(switchcomp.Props{ID: "airplane-mode"})
		@label.Label(label.Props{For: "airplane-mode"}) {
			Airplane Mode
		}
	</div>
}
```

## Installation

<CodeTabs>

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

```bash
shadcn-templ add switch
```

</TabsContent>

<TabsContent value="manual">

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

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

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

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

</Steps>

</TabsContent>

</CodeTabs>

## Usage

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

```templ showLineNumbers
@switchcomp.Switch()
```

## Description

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	switchcomp "github.com/axadrn/shadcn-templ/v2/components/switch"
)

templ SwitchDescription() {
	@field.Field(field.Props{Orientation: field.OrientationHorizontal, Class: "max-w-sm"}) {
		@field.Content() {
			@field.Label(field.LabelProps{For: "switch-focus-mode"}) {
				Share across devices
			}
			@field.Description() {
				Focus is shared across devices, and turns off when you leave the app.
			}
		}
		@switchcomp.Switch(switchcomp.Props{ID: "switch-focus-mode"})
	}
}
```

## Choice Card

Card-style selection where `field.Label` wraps the entire `field.Field` for a clickable card pattern.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	switchcomp "github.com/axadrn/shadcn-templ/v2/components/switch"
)

templ SwitchChoiceCard() {
	@field.Group(field.GroupProps{Class: "w-full max-w-sm"}) {
		@field.Label(field.LabelProps{For: "switch-share"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@field.Content() {
					@field.Title() {
						Share across devices
					}
					@field.Description() {
						Focus is shared across devices, and turns off when you leave the app.
					}
				}
				@switchcomp.Switch(switchcomp.Props{ID: "switch-share"})
			}
		}
		@field.Label(field.LabelProps{For: "switch-notifications"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@field.Content() {
					@field.Title() {
						Enable notifications
					}
					@field.Description() {
						Receive notifications when focus mode is enabled or disabled.
					}
				}
				@switchcomp.Switch(switchcomp.Props{ID: "switch-notifications", Checked: true})
			}
		}
	}
}
```

## Disabled

Add the `Disabled` prop to the `Switch` component to disable the switch. Add the `Disabled` prop to the `field.Field` component for styling.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	switchcomp "github.com/axadrn/shadcn-templ/v2/components/switch"
)

templ SwitchDisabled() {
	@field.Field(field.Props{Orientation: field.OrientationHorizontal, Class: "w-fit", Attributes: templ.Attributes{"data-disabled": "true"}}) {
		@switchcomp.Switch(switchcomp.Props{ID: "switch-disabled-unchecked", Disabled: true})
		@field.Label(field.LabelProps{For: "switch-disabled-unchecked"}) {
			Disabled
		}
	}
}
```

## Invalid

Add the `aria-invalid` attribute to the `Switch` component to indicate an invalid state. Add the `Invalid` prop to the `field.Field` component for styling.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	switchcomp "github.com/axadrn/shadcn-templ/v2/components/switch"
)

templ SwitchInvalid() {
	@field.Field(field.Props{Orientation: field.OrientationHorizontal, Class: "max-w-sm", Attributes: templ.Attributes{"data-invalid": "true"}}) {
		@field.Content() {
			@field.Label(field.LabelProps{For: "switch-terms"}) {
				Accept terms and conditions
			}
			@field.Description() {
				You must accept the terms and conditions to continue.
			}
		}
		@switchcomp.Switch(switchcomp.Props{
			ID: "switch-terms",
			Attributes: templ.Attributes{
				"aria-invalid": "true",
			},
		})
	}
}
```

## Size

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	switchcomp "github.com/axadrn/shadcn-templ/v2/components/switch"
)

templ SwitchSizes() {
	@field.Group(field.GroupProps{Class: "w-full max-w-[10rem]"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@switchcomp.Switch(switchcomp.Props{ID: "switch-size-sm", Size: switchcomp.SizeSm})
			@field.Label(field.LabelProps{For: "switch-size-sm"}) {
				Small
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@switchcomp.Switch(switchcomp.Props{ID: "switch-size-default", Size: switchcomp.SizeDefault})
			@field.Label(field.LabelProps{For: "switch-size-default"}) {
				Default
			}
		}
	}
}
```

## API Reference

### Switch

The `Switch` component renders the toggle as a `role="switch"` root with a hidden native checkbox beside it that carries form participation and label association.

| Prop       | Type                    | Default       |
| ---------- | ----------------------- | ------------- |
| `Name`     | `string`                | -             |
| `Value`    | `string`                | `on`          |
| `Checked`  | `bool`                  | `false`       |
| `Disabled` | `bool`                  | `false`       |
| `Form`     | `string`                | -             |
| `Size`     | `SizeDefault \| SizeSm` | `SizeDefault` |
| `Class`    | `string`                | -             |