Skip to main content

Checkbox & Radio

Checkbox is a boolean toggle. Radio selects a single value from a group.

Checkbox​

// Themed (recommended)
theme.CheckboxOf(ctx, isChecked, func(value bool) {
    s.SetState(func() {
        isChecked = value
    })
})

// Explicit
widgets.Checkbox{
    Value:       isChecked,
    ActiveColor: colors.Primary,
    CheckColor:  colors.OnPrimary,
    OnChanged: func(value bool) {
        s.SetState(func() {
            isChecked = value
        })
    },
}

Checkbox Properties​

PropertyTypeDescription
ValueboolCurrent checked state
ActiveColorgraphics.ColorFill color when checked
CheckColorgraphics.ColorCheckmark color
OnChangedfunc(bool)Called when toggled

Radio​

// Themed (recommended)
theme.RadioOf(ctx, "email", selectedOption, func(value string) {
    s.SetState(func() {
        selectedOption = value
    })
})

// Explicit
widgets.Radio[string]{
    Value:       "email",
    GroupValue:  selectedOption,
    ActiveColor: colors.Primary,
    OnChanged: func(value string) {
        s.SetState(func() {
            selectedOption = value
        })
    },
}

Radio Properties​

PropertyTypeDescription
ValueTThe value this radio button represents
GroupValueTCurrently selected value in the group
ActiveColorgraphics.ColorFill color when selected
OnChangedfunc(T)Called when selected

Common Patterns​

Radio Group​

widgets.Column{
    MainAxisSize: widgets.MainAxisSizeMin,
    Children: []core.Widget{
        theme.RadioOf(ctx, "email", contactMethod, setContactMethod),
        theme.RadioOf(ctx, "phone", contactMethod, setContactMethod),
        theme.RadioOf(ctx, "mail", contactMethod, setContactMethod),
    },
}