Switch

package showcase import ( "github.com/templui/templui/components/card" "github.com/templui/templui/components/label" // "switch" is a reserved Go keyword, so we use an alias switchcomp "github.com/templui/templui/components/switch" ) templ SwitchDefault() { <div class="flex flex-col gap-6"> <!-- Basic switch --> <div class="flex items-center gap-2"> @switchcomp.Switch(switchcomp.Props{ ID: "airplane-mode", }) @label.Label(label.Props{ For: "airplane-mode", }) { Airplane Mode } </div> <!-- Switch with description --> <div class="flex items-start gap-3"> @switchcomp.Switch(switchcomp.Props{ ID: "marketing", Checked: true, }) <div class="grid gap-1.5 leading-none"> @label.Label(label.Props{ For: "marketing", }) { Marketing emails } <p class="text-sm text-muted-foreground"> Receive emails about new products, features, and more. </p> </div> </div> <!-- Disabled switch --> <div class="flex items-center gap-2"> @switchcomp.Switch(switchcomp.Props{ ID: "disabled", Disabled: true, }) @label.Label(label.Props{ For: "disabled", Class: "opacity-50", }) { Disabled Switch } </div> <!-- Switch in a card (Settings-like) --> @label.Label(label.Props{ For: "notifications", Class: "block cursor-pointer", }) { @card.Card(card.Props{ Class: "hover:bg-muted/50 transition-colors", }) { @card.Content(card.ContentProps{ Class: "flex items-center justify-between p-4", }) { <div class="space-y-0.5"> <div class="text-sm font-medium">Push Notifications</div> <div class="text-sm text-muted-foreground"> Receive notifications about your account activity. </div> </div> @switchcomp.Switch(switchcomp.Props{ ID: "notifications", }) } } } </div> }