Checkbox
Control that allows selecting multiple options from a list.
TailwindCSS
package showcase
import "github.com/axzilla/templui/pkg/components"
templ CheckboxDefault() {
@components.Checkbox(components.CheckboxProps{})
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
// CheckboxProps configures the Checkbox component
type CheckboxProps struct {
ID string // DOM identifier
Name string // Form field name
Value string // Checkbox value
Disabled bool // Prevents interaction
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon
templ Checkbox(props CheckboxProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<div class="relative flex items-center">
<input
x-ref={ props.ID }
data-input-id={ props.ID }
data-testid={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }
type="checkbox"
class={
utils.TwMerge(
// Layout
"relative size-4 overflow-hidden peer",
"before:absolute before:inset-0 before:content['']",
// Styling
"appearance-none rounded-sm border-2 border-primary bg-background",
"cursor-pointer transition-colors",
// States
"checked:before:bg-primary",
"disabled:cursor-not-allowed disabled:opacity-50",
// Custom
props.Class,
),
}
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
// Styling
"size-3 text-primary-foreground pointer-events-none opacity-0",
// States
"peer-checked:opacity-100",
),
}
>
if props.Icon != nil {
@props.Icon
} else {
@icons.Check(icons.IconProps{Size: "12"})
}
</div>
</div>
}
Usage
@components.Checkbox(components.CheckboxProps{...})Examples
Checked
package showcase
import "github.com/axzilla/templui/pkg/components"
templ CheckboxChecked() {
@components.Checkbox(components.CheckboxProps{
Checked: true,
})
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
// CheckboxProps configures the Checkbox component
type CheckboxProps struct {
ID string // DOM identifier
Name string // Form field name
Value string // Checkbox value
Disabled bool // Prevents interaction
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon
templ Checkbox(props CheckboxProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<div class="relative flex items-center">
<input
x-ref={ props.ID }
data-input-id={ props.ID }
data-testid={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }
type="checkbox"
class={
utils.TwMerge(
// Layout
"relative size-4 overflow-hidden peer",
"before:absolute before:inset-0 before:content['']",
// Styling
"appearance-none rounded-sm border-2 border-primary bg-background",
"cursor-pointer transition-colors",
// States
"checked:before:bg-primary",
"disabled:cursor-not-allowed disabled:opacity-50",
// Custom
props.Class,
),
}
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
// Styling
"size-3 text-primary-foreground pointer-events-none opacity-0",
// States
"peer-checked:opacity-100",
),
}
>
if props.Icon != nil {
@props.Icon
} else {
@icons.Check(icons.IconProps{Size: "12"})
}
</div>
</div>
}
With Label
package showcase
import "github.com/axzilla/templui/pkg/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",
Text: "Accept terms and conditions",
})
</div>
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
// CheckboxProps configures the Checkbox component
type CheckboxProps struct {
ID string // DOM identifier
Name string // Form field name
Value string // Checkbox value
Disabled bool // Prevents interaction
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon
templ Checkbox(props CheckboxProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<div class="relative flex items-center">
<input
x-ref={ props.ID }
data-input-id={ props.ID }
data-testid={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }
type="checkbox"
class={
utils.TwMerge(
// Layout
"relative size-4 overflow-hidden peer",
"before:absolute before:inset-0 before:content['']",
// Styling
"appearance-none rounded-sm border-2 border-primary bg-background",
"cursor-pointer transition-colors",
// States
"checked:before:bg-primary",
"disabled:cursor-not-allowed disabled:opacity-50",
// Custom
props.Class,
),
}
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
// Styling
"size-3 text-primary-foreground pointer-events-none opacity-0",
// States
"peer-checked:opacity-100",
),
}
>
if props.Icon != nil {
@props.Icon
} else {
@icons.Check(icons.IconProps{Size: "12"})
}
</div>
</div>
}
Disabled
package showcase
import "github.com/axzilla/templui/pkg/components"
templ CheckboxDisabled() {
<div class="flex items-center gap-2">
@components.Checkbox(components.CheckboxProps{
ID: "checkbox-disabled",
Disabled: true,
})
@components.Label(components.LabelProps{
For: "checkbox-disabled",
Text: "Accept terms and conditions",
})
</div>
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
// CheckboxProps configures the Checkbox component
type CheckboxProps struct {
ID string // DOM identifier
Name string // Form field name
Value string // Checkbox value
Disabled bool // Prevents interaction
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon
templ Checkbox(props CheckboxProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<div class="relative flex items-center">
<input
x-ref={ props.ID }
data-input-id={ props.ID }
data-testid={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }
type="checkbox"
class={
utils.TwMerge(
// Layout
"relative size-4 overflow-hidden peer",
"before:absolute before:inset-0 before:content['']",
// Styling
"appearance-none rounded-sm border-2 border-primary bg-background",
"cursor-pointer transition-colors",
// States
"checked:before:bg-primary",
"disabled:cursor-not-allowed disabled:opacity-50",
// Custom
props.Class,
),
}
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
// Styling
"size-3 text-primary-foreground pointer-events-none opacity-0",
// States
"peer-checked:opacity-100",
),
}
>
if props.Icon != nil {
@props.Icon
} else {
@icons.Check(icons.IconProps{Size: "12"})
}
</div>
</div>
}
Custom Icon
package showcase
import (
"github.com/axzilla/templui/pkg/components"
"github.com/axzilla/templui/pkg/icons"
)
templ CheckboxCustomIcon() {
@components.Checkbox(components.CheckboxProps{
Icon: icons.Plus(icons.IconProps{Size: "12"}),
Checked: true,
})
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
// CheckboxProps configures the Checkbox component
type CheckboxProps struct {
ID string // DOM identifier
Name string // Form field name
Value string // Checkbox value
Disabled bool // Prevents interaction
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon
templ Checkbox(props CheckboxProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<div class="relative flex items-center">
<input
x-ref={ props.ID }
data-input-id={ props.ID }
data-testid={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }
type="checkbox"
class={
utils.TwMerge(
// Layout
"relative size-4 overflow-hidden peer",
"before:absolute before:inset-0 before:content['']",
// Styling
"appearance-none rounded-sm border-2 border-primary bg-background",
"cursor-pointer transition-colors",
// States
"checked:before:bg-primary",
"disabled:cursor-not-allowed disabled:opacity-50",
// Custom
props.Class,
),
}
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
// Styling
"size-3 text-primary-foreground pointer-events-none opacity-0",
// States
"peer-checked:opacity-100",
),
}
>
if props.Icon != nil {
@props.Icon
} else {
@icons.Check(icons.IconProps{Size: "12"})
}
</div>
</div>
}
Form
Choose all areas that interest you.
Please select at least one interest.
package showcase
import "github.com/axzilla/templui/pkg/components"
templ CheckboxForm() {
<div class="w-full max-w-sm">
@components.FormItem(components.FormItemProps{}) {
// Group Label
@components.FormLabel(components.FormLabelProps{
Text: "Select your interests",
})
// Option 1
@components.FormItemFlex(components.FormItemProps{}) {
@components.Checkbox(components.CheckboxProps{
ID: "c1",
Name: "interests",
Value: "design",
Checked: true,
})
@components.FormLabel(components.FormLabelProps{
For: "c1",
Text: "Design and UX",
})
}
// Option 2
@components.FormItemFlex(components.FormItemProps{}) {
@components.Checkbox(components.CheckboxProps{
ID: "c2",
Name: "interests",
Value: "development",
Disabled: true,
})
@components.FormLabel(components.FormLabelProps{
For: "c2",
Text: "Development (Coming Soon)",
})
}
// Option 3
@components.FormItemFlex(components.FormItemProps{}) {
@components.Checkbox(components.CheckboxProps{
ID: "c3",
Name: "interests",
Value: "business",
})
@components.FormLabel(components.FormLabelProps{
For: "c3",
Text: "Business and Marketing",
})
}
// Description
@components.FormDescription(components.FormDescriptionProps{}) {
Choose all areas that interest you.
}
// Error Message
@components.FormMessage(components.FormMessageProps{
Type: "error",
Message: "Please select at least one interest.",
})
}
</div>
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
// CheckboxProps configures the Checkbox component
type CheckboxProps struct {
ID string // DOM identifier
Name string // Form field name
Value string // Checkbox value
Disabled bool // Prevents interaction
Checked bool // Selected state
Icon templ.Component // Custom check icon
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Checkbox renders a styled checkbox input with customizable icon
templ Checkbox(props CheckboxProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<div class="relative flex items-center">
<input
x-ref={ props.ID }
data-input-id={ props.ID }
data-testid={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
name={ props.Name }
value={ props.Value }
type="checkbox"
class={
utils.TwMerge(
// Layout
"relative size-4 overflow-hidden peer",
"before:absolute before:inset-0 before:content['']",
// Styling
"appearance-none rounded-sm border-2 border-primary bg-background",
"cursor-pointer transition-colors",
// States
"checked:before:bg-primary",
"disabled:cursor-not-allowed disabled:opacity-50",
// Custom
props.Class,
),
}
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
// Styling
"size-3 text-primary-foreground pointer-events-none opacity-0",
// States
"peer-checked:opacity-100",
),
}
>
if props.Icon != nil {
@props.Icon
} else {
@icons.Check(icons.IconProps{Size: "12"})
}
</div>
</div>
}