Checkbox复选框

查看源码components/checkbox.go

接受条款#

点击切换勾选；语义状态与可见反馈同步。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

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

多项选择#

三项桌面偏好独立选择，不模拟生产 API 尚未提供的混合态。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

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

校验与禁用#

必选项未选时显示校验状态，另有两个禁用样本。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

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)

安装

将组件源码复制到自己的项目，直接修改。

go run ./cmd/viva add --out ./components/local checkbox

受控选择#

应用持有 checked 布尔值。BeginCheckbox 读取它、声明复选框语义并绘制当前状态；点击回调负责改变状态。

每个复选框都需要稳定 ID 和明确标签。
Disabled 与 Invalid 是显示和交互选项，不管理校验业务状态。
当前 API 未实现不确定态，示例不会伪造该能力。

键盘与可访问性#

Tab 聚焦可用复选框；空格或 Enter 与点击使用同一个状态回调。选中值通过语义树暴露。

键盘操作

Tab 在控件间移动；Ctrl/⌘ K 搜索组件。进入预览后，键盘事件由 Go 运行时处理。