Checkbox
Control that allows selecting multiple options from a list.
TailwindCSS
package showcase
import "github.com/axzilla/templui/internal/components/checkbox"
templ CheckboxDefault() {
@checkbox.Checkbox()
}
Installation
templui add checkboxCopy and paste the following code into your project:
package checkbox import ( "github.com/axzilla/templui/internal/components/icon" "github.com/axzilla/templui/internal/utils" ) type Props struct { ID string Class string Attributes templ.Attributes Name string Value string Disabled bool Required bool Checked bool Icon templ.Component } templ Checkbox(props ...Props) { {{ var p Props }} if len(props) > 0 { {{ p = props[0] }} } <div class="relative flex items-center"> <input checked?={ p.Checked } disabled?={ p.Disabled } required?={ p.Required } if p.ID != "" { id={ p.ID } } if p.Name != "" { name={ p.Name } } if p.Value != "" { value={ p.Value } } type="checkbox" class={ utils.TwMerge( "relative size-4 overflow-hidden peer", "before:absolute before:inset-0 before:content['']", "appearance-none rounded-sm border-2 border-primary bg-background", "cursor-pointer transition-colors", "checked:before:bg-primary", "disabled:cursor-not-allowed disabled:opacity-50", p.Class, ), } { p.Attributes... } /> <div class={ utils.TwMerge( "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", "size-3 text-primary-foreground pointer-events-none opacity-0", "peer-checked:opacity-100", ), } > if p.Icon != nil { @p.Icon } else { @icon.Check(icon.Props{Size: 12}) } </div> </div> }Update the import paths to match your project setup.
Examples
Checked
package showcase
import "github.com/axzilla/templui/internal/components/checkbox"
templ CheckboxChecked() {
@checkbox.Checkbox(checkbox.Props{
Checked: true,
},
)
}
With Label
package showcase
import (
"github.com/axzilla/templui/internal/components/checkbox"
"github.com/axzilla/templui/internal/components/label"
)
templ CheckboxWithLabel() {
<div class="flex items-center gap-2">
@checkbox.Checkbox(checkbox.Props{
ID: "checkbox-with-label",
})
@label.Label(label.Props{
For: "checkbox-with-label",
}) {
Accept terms and conditions
}
</div>
}
Disabled
package showcase
import (
"github.com/axzilla/templui/internal/components/checkbox"
"github.com/axzilla/templui/internal/components/label"
)
templ CheckboxDisabled() {
<div class="flex items-center gap-2">
@checkbox.Checkbox(checkbox.Props{
Disabled: true,
ID: "checkbox-disabled",
},
)
@label.Label(label.Props{
For: "checkbox-disabled",
}) {
Accept terms and conditions
}
</div>
}
Custom Icon
package showcase
import (
"github.com/axzilla/templui/internal/components/checkbox"
"github.com/axzilla/templui/internal/components/icon"
)
templ CheckboxCustomIcon() {
@checkbox.Checkbox(checkbox.Props{
Icon: icon.Plus(icon.Props{Size: 12}),
Checked: true,
},
)
}
Form
Choose all areas that interest you.
Please select at least one interest.
package showcase
import (
"github.com/axzilla/templui/internal/components/checkbox"
"github.com/axzilla/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>
}