Label

package showcase import ( "github.com/templui/templui/components/card" "github.com/templui/templui/components/checkbox" "github.com/templui/templui/components/label" ) templ CheckboxDefault() { <div class="flex flex-col gap-6"> <!-- Basic checkbox with label --> <div class="flex items-center gap-3"> @checkbox.Checkbox(checkbox.Props{ ID: "terms", Name: "agreements", Value: "terms", }) @label.Label(label.Props{ For: "terms", }) { Accept terms and conditions } </div> <!-- Checkbox with description --> <div class="flex items-start gap-3"> @checkbox.Checkbox(checkbox.Props{ ID: "newsletter", Name: "agreements", Value: "newsletter", Checked: true, }) <div class="grid gap-2"> @label.Label(label.Props{ For: "newsletter", }) { Subscribe to newsletter } <p class="text-muted-foreground text-sm"> Get notified about new features and updates. </p> </div> </div> <!-- Disabled checkbox --> <div class="flex items-center gap-3"> @checkbox.Checkbox(checkbox.Props{ ID: "cookies", Name: "agreements", Value: "cookies", Disabled: true, }) @label.Label(label.Props{ For: "cookies", }) { Use essential cookies only } </div> <!-- Checkbox in a card container --> @label.Label(label.Props{ For: "premium", Class: "block cursor-pointer", }) { @card.Card(card.Props{ Class: "hover:border-primary/50 has-[:checked]:ring-1 has-[:checked]:ring-primary has-[:checked]:border-primary transition-all", }) { @card.Content(card.ContentProps{ Class: "p-3 flex items-start gap-3", }) { @checkbox.Checkbox(checkbox.Props{ ID: "premium", Name: "agreements", Value: "premium", }) <div class="grid gap-1.5"> <p class="text-sm leading-none font-medium"> Enable premium features </p> <p class="text-muted-foreground text-sm"> Unlock advanced functionality and priority support. </p> </div> } } } </div> }