Checkbox

Checkbox renders a native boolean form control.

github.com/fastygo/templ/ui

Summary

Checkbox renders a native boolean form control.Checkbox uses ControlClasses recipe from utils.

Accept terms in a signup form

Toggle one optional setting in a list

type attribute is always checkbox

ControlAttrs merges aria-label without duplicate id

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Checkbox(ui.CheckboxProps{Name: "terms", ID: "terms"})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Checkbox(ui.CheckboxProps{Name: "terms", ID: "terms"})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Checkbox(ui.CheckboxProps{Name: "terms", ID: "terms", Checked: true})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Checkbox(ui.CheckboxProps{Name: "terms", ID: "terms", Checked: true})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Checkbox(ui.CheckboxProps{Name: "locked", Disabled: true, Checked: true})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Checkbox(ui.CheckboxProps{Name: "locked", Disabled: true, Checked: true})
}

AriaLabel · string — role: accessible-name

Checked · bool — role: state

Disabled · bool — role: state

Name · string — role: form-name

Required · bool — role: state

Size · string — role: density; enum: default|sm|lg|xs; default: default; source: utils.recipes.ControlSize

Value · string — role: submit-value

Variant · string — role: appearance; enum: default|outline|ghost|unstyled; default: default; source: utils.recipes.ControlChrome