Switch

A control that allows the user to toggle between checked and not checked.

Airplane Mode

package examples import (

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

shadcn-templ add switch

Copy and paste the following code into your project.

components/switch/switch.templ

package switchcomp import "github.com/axadrn/shadcn-templ/v2/utils" type Size string const (	SizeDefault Size = "default"	SizeSm      Size = "sm") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	Name       string	Value      string	Disabled   bool	Checked    bool	Form       string	// Size of the switch. Options: 'default', 'sm'.	Size Size} // Switch is the vanilla port of Base UI's Switch.Root// (switch/root/SwitchRoot.tsx): a span root carries role="switch",// aria-checked and the data-checked/data-unchecked/data-disabled state// attributes the style CSS keys on, the thumb is a real element like// Switch.Thumb, and a visually hidden native checkbox rendered beside the// root carries id/name/value/form for label association and form submission.// switch.js ports the runtime behavior.templ Switch(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	if p.Size == "" {		{{ p.Size = SizeDefault }}	}	<span		data-slot="switch"		data-tui-switch		data-size={ string(p.Size) }		role="switch"		if p.Checked {			aria-checked="true"			data-checked		} else {			aria-checked="false"			data-unchecked		}		if p.Disabled {			data-disabled			aria-disabled="true"			tabindex="-1"		} else {			tabindex="0"		}		class={			utils.CN(				// 1:1 base/ui/switch.tsx: structure lives here, the look comes from				// the active style-*.css via cn-switch.				"cn-switch peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",				p.Class,			),		}		{ p.Attributes... }	>		// Base UI mirrors data-checked/data-unchecked onto the thumb via the		// stateAttributesMapping; switch.js keeps them in sync.		<span			data-slot="switch-thumb"			if p.Checked {				data-checked			} else {				data-unchecked			}			class="cn-switch-thumb pointer-events-none block ring-0 transition-transform"		></span>	</span>	// Base UI renders the hidden input beside the root. It owns the id, so	// native <label for> association keeps working; the inline styles are the	// visuallyHiddenInput/visuallyHidden pendants from	// @base-ui/utils/visuallyHidden.ts (named inputs stay absolute so native	// validation popups anchor near the control).	<input		type="checkbox"		data-tui-switch-input		aria-hidden="true"		tabindex="-1"		id={ p.ID }		checked?={ p.Checked }		disabled?={ p.Disabled }		if p.Name != "" {			name={ p.Name }		}		if p.Value != "" {			value={ p.Value }		}		if p.Form != "" {			form={ p.Form }		}		if p.Name != "" {			style="clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;width:1px;height:1px;margin:-1px;position:absolute"		} else {			style="clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;width:1px;height:1px;margin:-1px;position:fixed;top:0;left:0"		}	/>}

Update the import paths to match your project setup.

Usage

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

@switchcomp.Switch()

Description

Share across devices

Focus is shared across devices, and turns off when you leave the app.

package examples import (

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.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode is enabled or disabled.

package examples import (

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.

Disabled

package examples import (

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.

Accept terms and conditions

You must accept the terms and conditions to continue.

package examples import (

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.

Small

Default

package examples import (

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`	-

Spinner Table

On This Page

Installation Usage Description Choice Card Disabled Invalid Size API Reference Switch

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.