Toggle

Two-state button that can be switched on or off.

TailwindCSS

package showcase

import "github.com/axzilla/templui/pkg/components"

templ ToggleDefault() {
	@components.Toggle(components.ToggleProps{})
}

package components

import "github.com/axzilla/templui/pkg/utils"

type ToggleProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Disabled   bool             // Prevents interaction
	Checked    bool             // Toggled state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
	if props.ID == "" {
		{{ props.ID = utils.RandomID() }}
	}
	<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
		<input
			x-ref={ props.ID }
			checked?={ props.Checked }
			disabled?={ props.Disabled }
			id={ props.ID }
			type="checkbox"
			name={ props.Name }
			class="peer hidden"
			role="switch"
			{ props.Attributes... }
		/>
		<div
			class={
				utils.TwMerge(
					// Layout
					"relative h-6 w-10",
					"after:absolute after:left-0.5 after:top-0.5",
					"after:h-5 after:w-5",
			
					// Styling
					"rounded-full bg-neutral-200",
					"after:rounded-full after:bg-muted-foreground",
					"after:content-['']",
			
					// States
					"after:transition-all",
					"peer-checked:bg-primary",
					"peer-checked:after:translate-x-[16px]",
					"peer-checked:after:bg-secondary",
					"peer-disabled:opacity-50",
					"peer-disabled:cursor-not-allowed",
			
					// Custom
					props.Class,
				),
			}
			aria-hidden="true"
		></div>
	</label>
}

Usage

@components.Toggle(components.ToggleProps{...})

Examples

Checked

package showcase

import "github.com/axzilla/templui/pkg/components"

templ ToggleChecked() {
	@components.Toggle(components.ToggleProps{
		Checked: true,
	})
}

package components

import "github.com/axzilla/templui/pkg/utils"

type ToggleProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Disabled   bool             // Prevents interaction
	Checked    bool             // Toggled state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
	if props.ID == "" {
		{{ props.ID = utils.RandomID() }}
	}
	<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
		<input
			x-ref={ props.ID }
			checked?={ props.Checked }
			disabled?={ props.Disabled }
			id={ props.ID }
			type="checkbox"
			name={ props.Name }
			class="peer hidden"
			role="switch"
			{ props.Attributes... }
		/>
		<div
			class={
				utils.TwMerge(
					// Layout
					"relative h-6 w-10",
					"after:absolute after:left-0.5 after:top-0.5",
					"after:h-5 after:w-5",
			
					// Styling
					"rounded-full bg-neutral-200",
					"after:rounded-full after:bg-muted-foreground",
					"after:content-['']",
			
					// States
					"after:transition-all",
					"peer-checked:bg-primary",
					"peer-checked:after:translate-x-[16px]",
					"peer-checked:after:bg-secondary",
					"peer-disabled:opacity-50",
					"peer-disabled:cursor-not-allowed",
			
					// Custom
					props.Class,
				),
			}
			aria-hidden="true"
		></div>
	</label>
}

With Label

package showcase

import "github.com/axzilla/templui/pkg/components"

templ ToggleWithLabel() {
	<div class="flex items-center gap-2">
		@components.Toggle(components.ToggleProps{
			ID: "toggle-with-label",
		})
		@components.Label(components.LabelProps{
			For:  "toggle-with-label",
			Text: "Airplane Mode",
		})
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type ToggleProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Disabled   bool             // Prevents interaction
	Checked    bool             // Toggled state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
	if props.ID == "" {
		{{ props.ID = utils.RandomID() }}
	}
	<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
		<input
			x-ref={ props.ID }
			checked?={ props.Checked }
			disabled?={ props.Disabled }
			id={ props.ID }
			type="checkbox"
			name={ props.Name }
			class="peer hidden"
			role="switch"
			{ props.Attributes... }
		/>
		<div
			class={
				utils.TwMerge(
					// Layout
					"relative h-6 w-10",
					"after:absolute after:left-0.5 after:top-0.5",
					"after:h-5 after:w-5",
			
					// Styling
					"rounded-full bg-neutral-200",
					"after:rounded-full after:bg-muted-foreground",
					"after:content-['']",
			
					// States
					"after:transition-all",
					"peer-checked:bg-primary",
					"peer-checked:after:translate-x-[16px]",
					"peer-checked:after:bg-secondary",
					"peer-disabled:opacity-50",
					"peer-disabled:cursor-not-allowed",
			
					// Custom
					props.Class,
				),
			}
			aria-hidden="true"
		></div>
	</label>
}

Disabled

package showcase

import "github.com/axzilla/templui/pkg/components"

templ ToggleDisabled() {
	<div class="flex items-center gap-2">
		@components.Toggle(components.ToggleProps{
			ID:       "toggle-disabled",
			Disabled: true,
		})
		@components.Label(components.LabelProps{
			For:  "toggle-disabled",
			Text: "Airplane Mode",
		})
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type ToggleProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Disabled   bool             // Prevents interaction
	Checked    bool             // Toggled state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
	if props.ID == "" {
		{{ props.ID = utils.RandomID() }}
	}
	<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
		<input
			x-ref={ props.ID }
			checked?={ props.Checked }
			disabled?={ props.Disabled }
			id={ props.ID }
			type="checkbox"
			name={ props.Name }
			class="peer hidden"
			role="switch"
			{ props.Attributes... }
		/>
		<div
			class={
				utils.TwMerge(
					// Layout
					"relative h-6 w-10",
					"after:absolute after:left-0.5 after:top-0.5",
					"after:h-5 after:w-5",
			
					// Styling
					"rounded-full bg-neutral-200",
					"after:rounded-full after:bg-muted-foreground",
					"after:content-['']",
			
					// States
					"after:transition-all",
					"peer-checked:bg-primary",
					"peer-checked:after:translate-x-[16px]",
					"peer-checked:after:bg-secondary",
					"peer-disabled:opacity-50",
					"peer-disabled:cursor-not-allowed",
			
					// Custom
					props.Class,
				),
			}
			aria-hidden="true"
		></div>
	</label>
}

Form

package showcase

import "github.com/axzilla/templui/pkg/components"

templ ToggleForm() {
	<div class="w-full max-w-sm">
		@components.FormItem(components.FormItemProps{}) {
			@components.FormLabel(components.FormLabelProps{
				Text: "Connectivity Settings",
			})
			@components.FormItemFlex(components.FormItemProps{}) {
				@components.Toggle(components.ToggleProps{
					ID:   "airplane-mode",
					Name: "airplane",
				})
				@components.FormLabel(components.FormLabelProps{
					For:  "airplane-mode",
					Text: "Airplane Mode",
				})
			}
			@components.FormItemFlex(components.FormItemProps{}) {
				@components.Toggle(components.ToggleProps{
					ID:       "wifi-mode",
					Name:     "wifi",
					Disabled: true,
				})
				@components.FormLabel(components.FormLabelProps{
					For:  "wifi-mode",
					Text: "WiFi (Not Available)",
				})
			}
			@components.FormItemFlex(components.FormItemProps{}) {
				@components.Toggle(components.ToggleProps{
					ID:      "bluetooth-mode",
					Name:    "bluetooth",
					Checked: true,
				})
				@components.FormLabel(components.FormLabelProps{
					For:  "bluetooth-mode",
					Text: "Bluetooth",
				})
			}
			@components.FormDescription(components.FormDescriptionProps{}) {
				Manage your device's connectivity options.
			}
			@components.FormMessage(components.FormMessageProps{
				Type:    "error",
				Message: "Please configure your connectivity settings.",
			})
		}
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type ToggleProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Disabled   bool             // Prevents interaction
	Checked    bool             // Toggled state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
	if props.ID == "" {
		{{ props.ID = utils.RandomID() }}
	}
	<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
		<input
			x-ref={ props.ID }
			checked?={ props.Checked }
			disabled?={ props.Disabled }
			id={ props.ID }
			type="checkbox"
			name={ props.Name }
			class="peer hidden"
			role="switch"
			{ props.Attributes... }
		/>
		<div
			class={
				utils.TwMerge(
					// Layout
					"relative h-6 w-10",
					"after:absolute after:left-0.5 after:top-0.5",
					"after:h-5 after:w-5",
			
					// Styling
					"rounded-full bg-neutral-200",
					"after:rounded-full after:bg-muted-foreground",
					"after:content-['']",
			
					// States
					"after:transition-all",
					"peer-checked:bg-primary",
					"peer-checked:after:translate-x-[16px]",
					"peer-checked:after:bg-secondary",
					"peer-disabled:opacity-50",
					"peer-disabled:cursor-not-allowed",
			
					// Custom
					props.Class,
				),
			}
			aria-hidden="true"
		></div>
	</label>
}

Getting Started

Components

Toggle

Usage

Examples