Skip to content
v0.2.7

Checkbox

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

Default Rendered example
Usage Example 
@checkbox.Checkbox(checkbox.Config{
    ID:      "notifications",
    Label:   "Notifications",
    Checked: true,
})

Color Variants

Set Tone: checkbox.TonePrimary, checkbox.ToneSecondary, checkbox.ToneInfo, checkbox.ToneSuccess, checkbox.ToneWarning, or checkbox.ToneDanger.

Color Variants Rendered example
Color Variants 
@checkbox.Checkbox(checkbox.Config{ID: "success", Label: "Success", Tone: checkbox.ToneSuccess, Checked: true})

Custom Icons

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

Custom Icons Rendered example
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.

Animations Rendered example
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.

With Description Rendered example
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.

With Container Rendered example
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.

Checkbox Group Rendered example

Notifications

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 Rendered example
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})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/checkbox
Open v0.2.7 API
Button Combobox