Back

Checkbox

Variants

With Helper Texts

States

Indeterminate

Dash state — used for "select all" when only some items are selected.

Custom Icons

Replace the default checkmark/dash with any templ.Component.

Usage

A custom-styled checkbox with claymorphism.

@forms.Checkbox(forms.CheckboxProps{
    Label:             "Accept Terms",
    Name:              "terms",
    Hint:              "Read carefully.",
    Error:             "",      // shows error styling
    Checked:           false,
    CheckedIcon:       myHeartIcon(),  // custom checked icon (optional)
    IndeterminateIcon: myDashIcon(),   // custom indeterminate icon (optional)
})