Checkbox

Control that allows selecting multiple options from a list.

TailwindCSS

package components

import (
	"github.com/axzilla/templui/icons"
	"github.com/axzilla/templui/utils"
)

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

templ Checkbox(props ...CheckboxProps) {
	{{ var p CheckboxProps }}
	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 {
				@icons.Check(icons.IconProps{Size: 12})
			}
		</div>
	</div>
}

Usage

@components.Checkbox(components.CheckboxProps{...})

Examples

Checked

package components

import (
	"github.com/axzilla/templui/icons"
	"github.com/axzilla/templui/utils"
)

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

templ Checkbox(props ...CheckboxProps) {
	{{ var p CheckboxProps }}
	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 {
				@icons.Check(icons.IconProps{Size: 12})
			}
		</div>
	</div>
}

With Label

Accept terms and conditions

package showcase

import "github.com/axzilla/templui/components"

templ CheckboxWithLabel() {
	<div class="flex items-center gap-2">
		@components.Checkbox(components.CheckboxProps{
			ID: "checkbox-with-label",
		})
		@components.Label(components.LabelProps{
			For: "checkbox-with-label",
		}) {
			Accept terms and conditions
		}
	</div>
}

package components

import (
	"github.com/axzilla/templui/icons"
	"github.com/axzilla/templui/utils"
)

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

templ Checkbox(props ...CheckboxProps) {
	{{ var p CheckboxProps }}
	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 {
				@icons.Check(icons.IconProps{Size: 12})
			}
		</div>
	</div>
}

Disabled

Accept terms and conditions

package showcase

import "github.com/axzilla/templui/components"

templ CheckboxDisabled() {
	<div class="flex items-center gap-2">
		@components.Checkbox(components.CheckboxProps{
			Disabled: true,
			ID:       "checkbox-disabled",
		},
		)
		@components.Label(components.LabelProps{
			For: "checkbox-disabled",
		}) {
			Accept terms and conditions
		}
	</div>
}

package components

import (
	"github.com/axzilla/templui/icons"
	"github.com/axzilla/templui/utils"
)

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

templ Checkbox(props ...CheckboxProps) {
	{{ var p CheckboxProps }}
	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 {
				@icons.Check(icons.IconProps{Size: 12})
			}
		</div>
	</div>
}

Custom Icon

package showcase

import (
	"github.com/axzilla/templui/components"
	"github.com/axzilla/templui/icons"
)

templ CheckboxCustomIcon() {
	@components.Checkbox(components.CheckboxProps{
		Icon:    icons.Plus(icons.IconProps{Size: 12}),
		Checked: true,
	},
	)
}

package components

import (
	"github.com/axzilla/templui/icons"
	"github.com/axzilla/templui/utils"
)

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

templ Checkbox(props ...CheckboxProps) {
	{{ var p CheckboxProps }}
	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 {
				@icons.Check(icons.IconProps{Size: 12})
			}
		</div>
	</div>
}

Form

Dessign and UX

Development (Coming Soon)

Business and Marketing

Choose all areas that interest you.

Please select at least one interest.

package showcase

import "github.com/axzilla/templui/components"

templ CheckboxForm() {
	<div class="w-full max-w-sm">
		@components.FormItem() {
			@components.FormItemFlex() {
				@components.Checkbox(
					components.CheckboxProps{
						Name:    "interests",
						Value:   "design",
						ID:      "c1",
						Checked: true,
					},
				)
				@components.FormLabel(components.FormLabelProps{
					For: "c1",
				}) {
					Dessign and UX
				}
			}
			@components.FormItemFlex() {
				@components.Checkbox(components.CheckboxProps{
					Name:     "interests",
					Value:    "development",
					ID:       "c2",
					Disabled: true,
				})
				@components.FormLabel(components.FormLabelProps{
					For: "c2",
				}) {
					Development (Coming Soon)
				}
			}
			@components.FormItemFlex() {
				@components.Checkbox(components.CheckboxProps{
					Name:  "interests",
					Value: "marketing",
					ID:    "c3",
				})
				@components.FormLabel(components.FormLabelProps{
					For: "c3",
				}) {
					Business and Marketing
				}
			}
			@components.FormDescription() {
				Choose all areas that interest you.
			}
			@components.FormMessage(components.FormMessageProps{
				Variant: components.FormMessageVariantError,
			}) {
				Please select at least one interest.
			}
		}
	</div>
}

package components

import (
	"github.com/axzilla/templui/icons"
	"github.com/axzilla/templui/utils"
)

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

templ Checkbox(props ...CheckboxProps) {
	{{ var p CheckboxProps }}
	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 {
				@icons.Check(icons.IconProps{Size: 12})
			}
		</div>
	</div>
}

Getting Started

Components

Checkbox

Usage

Examples