Checkbox

Checkbox inputs with optional toggle switch variant.

I agree to the terms and conditions

1234
@popui.Checkbox(props.Checkbox{
	Name:  "terms",
	Label: "I agree to the terms and conditions",
})

Checked State

Checkbox can be pre-checked using the Checked prop.

Subscribe to newsletter

12345
@popui.Checkbox(props.Checkbox{
	Name:    "newsletter",
	Label:   "Subscribe to newsletter",
	Checked: true,
})

Switch Variant

Use Variant="switch" for a toggle switch style.

Enable notifications

Marketing emails

12345678910111213
<div class="space-y-3">
	@popui.Checkbox(props.Checkbox{
		Name:    "notifications",
		Label:   "Enable notifications",
		Variant: "switch",
		Checked: true,
	})
	@popui.Checkbox(props.Checkbox{
		Name:    "marketing",
		Label:   "Marketing emails",
		Variant: "switch",
	})
</div>

Disabled State

Disabled checkboxes and switches with reduced opacity.

Disabled checkbox

Disabled checked checkbox

Disabled switch

12345678910111213141516171819
<div class="space-y-3">
	@popui.Checkbox(props.Checkbox{
		Name:     "option1",
		Label:    "Disabled checkbox",
		Disabled: true,
	})
	@popui.Checkbox(props.Checkbox{
		Name:     "option2",
		Label:    "Disabled checked checkbox",
		Checked:  true,
		Disabled: true,
	})
	@popui.Checkbox(props.Checkbox{
		Name:     "option3",
		Label:    "Disabled switch",
		Variant:  "switch",
		Disabled: true,
	})
</div>

Option Group

Group multiple checkboxes together with a label.

Select your interests

Design

Development

Marketing

1234567891011121314151617
@popui.OptionGroup(props.OptionGroup{
	Label: "Select your interests",
}) {
	@popui.Checkbox(props.Checkbox{
		Name:    "interest_design",
		Label:   "Design",
		Checked: true,
	})
	@popui.Checkbox(props.Checkbox{
		Name:  "interest_development",
		Label: "Development",
	})
	@popui.Checkbox(props.Checkbox{
		Name:  "interest_marketing",
		Label: "Marketing",
	})
}

API Reference

Checkbox

Checkbox input with optional toggle switch variant.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier (auto-generated if not provided)
`Class`	`string`	-	Additional CSS classes to merge with checkbox styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Label`	`string`	-	Label text for the checkbox
`Variant`	`string`	-	Visual variant: "switch" for toggle switch style
`Name`	`string`	-	Form field name
`Value`	`string`	-	Form field value
`Checked`	`bool`	`false`	Whether the checkbox is checked
`Autofocus`	`bool`	`false`	Whether to autofocus on mount
`Disabled`	`bool`	`false`	Whether the checkbox is disabled

OptionGroup

Groups form elements like checkboxes and radio buttons with a label.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the group element
`Class`	`string`	-	Additional CSS classes to merge with group styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Label`	`string`	-	Label text for the group