Checkbox Card
Selectable card component that combines a checkbox with rich content for option selection.
Source
TailwindCSS
package showcase
import "github.com/axzilla/templui/internal/components/icon"
import "github.com/axzilla/templui/internal/components/checkboxcard"
templ CheckboxCardDefault() {
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@checkboxcard.CheckboxCard(checkboxcard.Props{
ID: "feature-analytics",
},
) {
@checkboxcard.Header() {
<div class="flex items-center gap-2">
<div class="text-primary">
@icon.ChartBar(icon.Props{Size: 20})
</div>
<h3>Analytics</h3>
</div>
}
@checkboxcard.Description() {
Real-time data analytics and reporting tools
}
@checkboxcard.Footer() {
@radioCardPriceFooter("$5/month")
}
}
@checkboxcard.CheckboxCard(checkboxcard.Props{
ID: "feature-storage",
},
) {
@checkboxcard.Header() {
<div class="flex items-center gap-2">
<div class="text-primary">
@icon.Cloud(icon.Props{Size: 20})
</div>
<h3>Cloud Storage</h3>
</div>
}
@checkboxcard.Description() {
Secure file storage with 100GB capacity
}
@checkboxcard.Footer() {
@radioCardPriceFooter("$3/month")
}
}
@checkboxcard.CheckboxCard(checkboxcard.Props{
ID: "feature-api",
Disabled: true,
}) {
@checkboxcard.Header() {
<div class="flex items-center gap-2">
<div class="text-primary">
@icon.Code(icon.Props{Size: 20})
</div>
<h3>API Access</h3>
</div>
}
@checkboxcard.Description() {
Full access to our developer API endpoints
}
@checkboxcard.Footer() {
@radioCardPriceFooter("$8/month")
}
}
</div>
}
Installation
templui add checkboxcard