T templcn/ui
Componentcheckbox

Checkbox

A control that allows the user to toggle between checked and not checked.

Preview

A control that allows the user to toggle between checked and not checked.

Installation

Add this component to your project using the CLI.

templcn add checkbox

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

<div class="flex items-center space-x-2">
  @ui.Checkbox(ui.CheckboxProps{ID: "terms", Name: "terms"})
  @ui.Label(ui.LabelProps{For: "terms"}) { Accept terms and conditions }
</div>

Composition

Use these parts together to build the component.

Checkbox
├── Label

Examples

Named examples and common variations.

States

Default, disabled and checked states.

API Reference
PropTypeDefaultDescription
Namestring""HTML name attribute for form submission.
CheckedboolfalseWhether the checkbox is checked.
DisabledboolfalseDisables the checkbox.
RequiredboolfalseMarks the checkbox as required.
InvalidboolfalseAdds aria-invalid for error states.
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type CheckboxProps struct {
	DOMProps
	Name           string
	Value          string
	Checked        bool
	DefaultChecked bool
	Disabled       bool
	Required       bool
	Invalid        bool
}

func Checkbox(props CheckboxProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		attrs := attrsFromDOMProps(props.DOMProps, "checkbox", "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 checked:border-primary checked:bg-primary checked:text-primary-foreground data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary")
		attrs["type"] = "checkbox"
		checked := props.Checked || props.DefaultChecked
		attrs["data-state"] = map[bool]string{true: "checked", false: "unchecked"}[checked]
		attrs["aria-checked"] = map[bool]string{true: "true", false: "false"}[checked]
		if props.Name != "" {
			attrs["name"] = props.Name
		}
		if props.Value != "" {
			attrs["value"] = props.Value
		}
		if props.Checked {
			attrs["checked"] = true
		}
		if props.DefaultChecked {
			attrs["checked"] = true
			attrs["data-default-checked"] = "true"
		}
		if props.Disabled {
			attrs["disabled"] = true
		}
		if props.Required {
			attrs["required"] = true
		}
		if props.Invalid {
			attrs["aria-invalid"] = "true"
		}
		return renderVoidElement(ctx, w, "input", attrs)
	})
}
Next: Collapsible