shadcn-templ

Toggle

A two-state button that can be either on or off.

templ
templ ToggleDemo() {
	<div class="flex flex-wrap items-center gap-2" x-data="{ bold: false, italic: false, underline: false }">
		@ui.Toggle(ui.ToggleVariantDefault, ui.ToggleSizeDefault, "bold", "", templ.Attributes{"aria-label": "Toggle bold"}) {
			@icons.Bold(icons.Props{Class: "h-4 w-4"})
		}
		@ui.Toggle(ui.ToggleVariantSecondary, ui.ToggleSizeDefault, "italic", "", templ.Attributes{"aria-label": "Toggle italic"}) {
			@icons.Italic(icons.Props{Class: "h-4 w-4"})
		}
		@ui.Toggle(ui.ToggleVariantDefault, ui.ToggleSizeLarge, "underline", "", templ.Attributes{"aria-label": "Toggle underline"}) {
			@icons.Underline(icons.Props{Class: "mr-2 h-4 w-4"})
			Underline
		}
	</div>
}