toggle

Documentation

Overview

templ: version: v0.2.793

templ: version: v0.2.793

Index

• Constants
• func Showcase() templ.Component
• func Toggle(props *Props) templ.Component
• type Color
• type Props
• type Size

Constants

const (
	Primary   Color = "primary"
	Secondary Color = "secondary"
	Success   Color = "success"
	Info      Color = "info"
	Warning   Color = "warning"
	Danger    Color = "danger"
	Gray      Color = "gray"

	Sm Size = "sm"
	Md Size = "md"
	Lg Size = "lg"
)

Functions

func Showcase

func Showcase() templ.Component

func Toggle

func Toggle(props *Props) templ.Component

Switcher renders a toggle switch component based on the provided props. It can be customized with different label placements, and supports both static and dynamic states through Alpine.js integration.

Props:

• ID: The unique identifier for the toggle input. Required.
• Name: The name attribute for the toggle input. Required.
• LabelLeft: The text label for the toggle. Optional.
• LabelRight: The text label for the toggle. Optional.
• Checked: Controls the checked state. Can be bool or string for Alpine.js binding. Optional.
• Disabled: Controls the disabled state. Can be bool or string for Alpine.js binding. Optional.
• Class: Additional CSS classes. Optional.
• Attrs: Additional HTML attributes. Optional.

Types

type Color

type Color string

Color indicates the color used defaults to Primary if ""

type Props

type Props struct {
	// ID is the unique identifier for the toggle input
	ID string

	// Name is the name attribute for the toggle input
	Name string

	// Label is the text label for the toggle
	LabelLeft string

	// Label is the text label for the toggle
	LabelRight string

	// Color specifies additional CSS classes to apply to the button regarding color.
	// Default: "" (empty string) == Primary
	Color Color

	// Size sets the size of the button.
	// Default: Md
	Size Size

	// It's treated as an Alpine.js expression for dynamic checking.
	// Example bool: Checked: "true"
	// Example string: Checked: "darkMode"
	Checked bool

	// It's treated as an Alpine.js expression for dynamic checking.
	// Example bool: Disabled: "true"
	// Example string: Disabled: "isLoading"
	Disabled string

	// Class specifies additional CSS classes
	Class string

	// Attrs allows passing additional HTML attributes
	Attrs templ.Attributes
}

Props defines the properties for the Toggle component

type Size

type Size string

Size represents the size of the toggle values: sm | md | lg