Controlled checkbox#
Click or press Space to change the application-owned selection.
f.Row().Gap(12).Items(flex.Center).Children(func() {
checked := accepted
if f.Checkbox(tree.ID(page, "terms"), checked).Label("Accept terms of use").Clicked() {
accepted = !checked
}
f.Text("Accept terms of use").FontSize(theme.Metrics.FontSizeM)
})Multiple selections#
Each checkbox has a stable identity and an independent selected value.
boxes := tree.Sub(page, tree.Name("box"))
for index, label := range [...]string{"Show line numbers", "Format on save", "Restore last window"} {
checked := selected&(1<<index) != 0
f.Row().Gap(12).Items(flex.Center).Children(func() {
if f.Checkbox(boxes.At(index), checked).Label(label).Clicked() {
selected ^= 1 << index
}
f.Text(label).FontSize(theme.Metrics.FontSizeM)
})
}Validation and disabled states#
The required selection shows validation feedback alongside disabled unchecked and checked controls.
boxes := tree.Sub(page, tree.Name("box"))
box := components.BeginCheckbox(canvas, theme, boxes.At(0), bounds, false).
Label("Required: accept terms of use").Invalid().Paint()
if box.Clicked() {
selected ^= 1
}
f.Checkbox(boxes.At(1), false).Label("Disabled · Unchecked").Disabled(true)
f.Checkbox(boxes.At(2), true).Label("Disabled · Checked").Disabled(true)Installation
Copy the recipe into your own project.
go run ./cmd/viva add --out ./components/local checkboxControlled selection#
The application owns the checked boolean. BeginCheckbox reads it, declares checkbox semantics and paints the current state; the click callback changes that boolean.
- Give each checkbox a stable ID and an explicit label.
- Disabled and Invalid are presentation and interaction options; they do not own validation state.
- Indeterminate is not implemented by the current checkbox API; it is not simulated in the demo.
Keyboard & accessibility#
Tab focuses an enabled checkbox; Space or Enter triggers the same caller-owned toggle as a click. The checked state is exposed through the semantic tree.
Keyboard
Use Tab to move between controls and Ctrl/⌘ K to search the catalog. Inside a preview, the Go runtime handles keyboard input.