Checkbox

Select one or more options. Supports color variants, custom icons, animations, descriptions, a bordered container, groups, and disabled states.

Notifications Unchecked

Usage Example

@checkbox.Checkbox(checkbox.Config{
    ID:      "notifications",
    Label:   "Notifications",
    Checked: true,
})

Color Variants

Set Variant: Primary, Secondary, Info, Success, Warning, or Danger.

Color Variants

@checkbox.Checkbox(checkbox.Config{ID: "success", Label: "Success", Variant: checkbox.Success, Checked: true})

Custom Icons

Swap the check glyph with Icon: checkbox.IconXmark, IconMinus, or IconPlus.

Xmark Minus Plus

Custom Icons

@checkbox.Checkbox(checkbox.Config{ID: "iconPlus", Label: "Plus", Icon: checkbox.IconPlus, Checked: true})

Animations

Set Animation: checkbox.AnimationSlideUp, AnimationScaleUp, or AnimationSlideDown for an animated check transition.

Slide Up Scale Up Slide Down

Animations

@checkbox.Checkbox(checkbox.Config{ID: "anim", Label: "Slide Up", Animation: checkbox.AnimationSlideUp, Checked: true})

With Description

Add HelperText (and HelperTextID for aria-describedby) for helper text under the label.

Email Updates You only gonna get good news, promise.

With Description

@checkbox.Checkbox(checkbox.Config{
    ID:            "email",
    Label:         "Email Updates",
    HelperText:   "You only gonna get good news, promise.",
    HelperTextID: "emailDesc",
    Checked:       true,
})

With Container

Container: true wraps the checkbox and label in a bordered, justify-between container.

Notifications

With Container

@checkbox.Checkbox(checkbox.Config{
    ID:        "containerCheck",
    Label:     "Notifications",
    Container: true,
    Checked:   true,
})

Checkbox Group

checkbox.CheckboxGroup renders a titled set of related checkboxes.

Notifications

Email notifications
Push notifications
SMS alerts

Checkbox Group

@checkbox.CheckboxGroup(checkbox.GroupConfig{
    Title: "Notifications",
    Items: []checkbox.Config{
        {ID: "email", Label: "Email notifications", Value: "email", Checked: true},
        {ID: "push", Label: "Push notifications", Value: "push"},
        {ID: "sms", Label: "SMS alerts", Value: "sms", Checked: true},
    },
})

Disabled

Disabled: true blocks interaction in both the checked and unchecked states.

Disabled unchecked Disabled checked

Disabled

@checkbox.Checkbox(checkbox.Config{ID: "off", Label: "Disabled unchecked", Disabled: true})
@checkbox.Checkbox(checkbox.Config{ID: "on", Label: "Disabled checked", Disabled: true, Checked: true})

API Reference

Prop	Type	Default	Description
`ID`	`string`	`""`	Unique id for the input (and label's for target).
`Name`	`string`	`""`	Form field name.
`Value`	`string`	`""`	Form field value when checked.
`Label`	`string`	`""`	Label text beside the box.
`Checked`	`bool`	`false`	Initial checked state.
`Disabled`	`bool`	`false`	Disable interaction.
`Variant`	`Variant`	`Primary`	Color: "primary", "secondary", "info", "success", "warning", "danger".
`Icon`	`Icon`	`IconCheck`	Check glyph: "check", "xmark", "minus", "plus".
`Animation`	`Animation`	`AnimationNone`	Check transition: "", "slide-up", "scale-up", "slide-down".
`HelperText`	`string`	`""`	Helper text below the label.
`HelperTextID`	`string`	`""`	ID of the description for aria-describedby.
`Container`	`bool`	`false`	Wrap in a bordered container.

Button Combobox