Get notified about new features and updates.
package showcase
import (
"github.com/templui/templui/internal/components/card"
"github.com/templui/templui/internal/components/checkbox"
"github.com/templui/templui/internal/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>
}
Installation
templui add checkboxExamples
Form
Choose all areas that interest you.
Please select at least one interest.
package showcase
import (
"github.com/templui/templui/internal/components/checkbox"
"github.com/templui/templui/internal/components/form"
)
templ CheckboxForm() {
<div class="w-full max-w-sm">
@form.Item() {
@form.ItemFlex() {
@checkbox.Checkbox(
checkbox.Props{
Name: "interests",
Value: "design",
ID: "c1",
Checked: true,
},
)
@form.Label(form.LabelProps{
For: "c1",
}) {
Dessign and UX
}
}
@form.ItemFlex() {
@checkbox.Checkbox(checkbox.Props{
Name: "interests",
Value: "development",
ID: "c2",
Disabled: true,
})
@form.Label(form.LabelProps{
For: "c2",
}) {
Development (Coming Soon)
}
}
@form.ItemFlex() {
@checkbox.Checkbox(checkbox.Props{
Name: "interests",
Value: "marketing",
ID: "c3",
})
@form.Label(form.LabelProps{
For: "c3",
}) {
Business and Marketing
}
}
@form.Description() {
Choose all areas that interest you.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
Please select at least one interest.
}
}
</div>
}
Indeterminate
package showcase
import (
"github.com/templui/templui/internal/components/checkbox"
"github.com/templui/templui/internal/components/label"
)
templ CheckboxIndeterminate() {
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3 border-b pb-3">
@checkbox.Checkbox(checkbox.Props{
ID: "select-all",
Group: "items",
GroupParent: true,
})
@label.Label(label.Props{
For: "select-all",
Class: "font-medium",
}) {
Select all
}
</div>
<div class="flex flex-col gap-3 pl-6">
<div class="flex items-center gap-3">
@checkbox.Checkbox(checkbox.Props{
ID: "item-1",
Name: "items",
Value: "1",
Group: "items",
Checked: true,
})
@label.Label(label.Props{
For: "item-1",
}) {
Item 1
}
</div>
<div class="flex items-center gap-3">
@checkbox.Checkbox(checkbox.Props{
ID: "item-2",
Name: "items",
Value: "2",
Group: "items",
Checked: true,
})
@label.Label(label.Props{
For: "item-2",
}) {
Item 2
}
</div>
<div class="flex items-center gap-3">
@checkbox.Checkbox(checkbox.Props{
ID: "item-3",
Name: "items",
Value: "3",
Group: "items",
})
@label.Label(label.Props{
For: "item-3",
}) {
Item 3
}
</div>
</div>
</div>
}
API Reference
Required parameter
Hover for description
Checkbox
Control that allows selecting multiple options from a list.
| Name | Type | Default |
|---|---|---|
Unique identifier for the checkbox element. | | - |
Additional CSS classes to apply to the checkbox. | | - |
Additional HTML attributes to apply to the checkbox element. | | - |
Name attribute for the form input. | | - |
Value attribute for the checkbox input. | | - |
Whether the checkbox is disabled and non-interactive. | | |
Whether the checkbox is initially checked. | | |
Group name to link checkboxes together. When set, checkboxes with the same group name will be connected for parent-child behavior. | | - |
Marks this checkbox as the parent of its group. The parent checkbox automatically toggles all children and shows an indeterminate state when some children are checked. | | |
Custom icon component to use instead of the default checkmark. | | - |