Checkbox

Control that allows selecting multiple options from a list.

Source Tailwind CSS JavaScript

Accept terms and conditions

Subscribe to newsletter

Get notified about new features and updates.

Use essential cookies only

Enable premium features

Unlock advanced functionality and priority support.

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/checkbox"
	"github.com/templui/templui/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 checkbox

Load the script once in your layout:

<head>
  @checkbox.Script()
</head>

Examples

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/templui/templui/components/checkbox"
	"github.com/templui/templui/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

Select all

Item 1

Item 2

Item 3

package showcase

import (
	"github.com/templui/templui/components/checkbox"
	"github.com/templui/templui/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
`ID` Unique identifier for the checkbox element.	`string`	-
`Class` Additional CSS classes to apply to the checkbox.	`string`	-
`Attributes` Additional HTML attributes to apply to the checkbox element.	`templ.Attributes`	-
`Name` Name attribute for the form input.	`string`	-
`Value` Value attribute for the checkbox input.	`string`	-
`Disabled` Whether the checkbox is disabled and non-interactive.	`bool`	`false`
`Checked` Whether the checkbox is initially checked.	`bool`	`false`
`Group` Group name to link checkboxes together. When set, checkboxes with the same group name will be connected for parent-child behavior.	`string`	-
`GroupParent` 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.	`bool`	`false`
`Icon` Custom icon component to use instead of the default checkmark.	`templ.Component`	-

Menu

Getting Started

Components

Checkbox

Installation

Examples

API Reference

Checkbox