Checkbox Card

Selectable card component that combines a checkbox with rich content for option selection.

TailwindCSS

Analytics

Real-time data analytics and reporting tools

Price $5/month

Cloud Storage

Secure file storage with 100GB capacity

Price $3/month

API Access

Full access to our developer API endpoints

Price $8/month

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

Copy and paste the following code into your project:

package checkboxcard

import "github.com/axzilla/templui/internal/utils"

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Checked    bool
	Disabled   bool
	Required   bool
	Name       string
	Value      string
}

type HeaderProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type DescriptionProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type FooterProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

templ CheckboxCard(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.ID == "" {
		{{ p.ID = utils.RandomID() }}
	}
	{{ inputId := p.ID + "-input" }}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"relative",
				utils.If(p.Disabled, "opacity-60"),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		<input
			type="checkbox"
			id={ inputId }
			if p.Name != "" {
				name={ p.Name }
			}
			if p.Value != "" {
				value={ p.Value }
			}
			checked?={ p.Checked }
			disabled?={ p.Disabled }
			required?={ p.Required }
			class="peer sr-only"
		/>
		<label
			for={ inputId }
			class={
				utils.TwMerge(
					"block w-full rounded-lg border overflow-hidden h-full",
					"bg-card text-card-foreground p-4 flex flex-col",
					"cursor-pointer",
					"hover:border-primary/50",
					"peer-checked:ring-1 peer-checked:ring-primary peer-checked:border-primary",
					utils.If(p.Disabled, "cursor-not-allowed"),
					"transition-all duration-200",
					p.Class,
				),
			}
		>
			{ children... }
		</label>
	</div>
}

templ Header(props ...HeaderProps) {
	{{ var p HeaderProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex items-center justify-between mb-2",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Description(props ...DescriptionProps) {
	{{ var p DescriptionProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<p
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"text-sm text-muted-foreground",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</p>
}

templ Footer(props ...FooterProps) {
	{{ var p FooterProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"mt-auto pt-4 w-full",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

Update the import paths to match your project setup.

Getting Started

Components