Switch

Switch renders a toggle with switch ARIA semantics.

github.com/fastygo/templ/ui

Summary

Switch renders a toggle with switch ARIA semantics.SwitchAttrs sets role switch and aria-checked.

Use Cases

Toggle notifications on or off

Toggle feature flags in settings forms

Semantics

Native input type is checkbox

SwitchAttrs overrides role to switch

aria-checked mirrors Checked prop at render time

Example state.off

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Switch(ui.SwitchProps{
		Name:      "notifications",
		ID:        "notifications",
		AriaLabel: "Notifications",
	})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Switch(ui.SwitchProps{
		Name:      "notifications",
		ID:        "notifications",
		AriaLabel: "Notifications",
	})
}

Example state.on

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Switch(ui.SwitchProps{
		Name:      "notifications",
		ID:        "notifications",
		Checked:   true,
		AriaLabel: "Notifications",
	})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Switch(ui.SwitchProps{
		Name:      "notifications",
		ID:        "notifications",
		Checked:   true,
		AriaLabel: "Notifications",
	})
}

Example state.disabled

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Switch(ui.SwitchProps{
		Name:      "locked",
		Disabled:  true,
		Checked:   true,
		AriaLabel: "Locked setting",
	})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Switch(ui.SwitchProps{
		Name:      "locked",
		Disabled:  true,
		Checked:   true,
		AriaLabel: "Locked setting",
	})
}

API

AriaLabel · string — role: accessible-name

Checked · bool — role: state

Disabled · bool — role: state

Name · string — role: form-name

Size · string — role: density; enum: default|sm|lg|xs; default: default; source: utils.recipes.ControlSize

Variant · string — role: appearance; enum: default|outline|ghost|unstyled; default: default; source: utils.recipes.ControlChrome