操作与选择Actions · 02 / 64

Checkbox

ui.widgets.Checkbox

独立布尔选择，支持未选、已选和不确定态。An independent boolean with unchecked, checked and indeterminate states.

BEHAVIOR CONTRACT

状态、焦点、label 命中区和 on_change 使用同一交互边界。State, focus, the label hit area and on_change share one interaction boundary.

RECORDED INTERACTION

Harness 点击真实 checkbox，状态文本变为 changed → checked。The harness clicks the real checkbox; the status reads changed → checked.

examples/storybook/stories.zig:184

pub fn buildCheckbox(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);

    const status = try ui.text(cx, "changed → (none)", .{ .font_size = 13, .color = light.color.fg_secondary });
    status.meta.ownership.meta.test_id = "story.checkbox.status";

    const story = try cx.bindState(CheckboxStory, .{ .status = status });

    const unchecked = try ui.widgets.Checkbox(.{
        .label_text = "Unchecked",
        .initial_checked = false,
        .on_change = ui.Cx.boolHandlerFrom(CheckboxStory, story, CheckboxStory.onChange),
    }).mount(scope, cx);
    unchecked.meta.ownership.meta.test_id = "story.checkbox.box";
    try c.appendChild(a, unchecked);

    try c.appendChild(a, try ui.widgets.Checkbox(.{ .label_text = "Checked", .initial_checked = true }).mount(scope, cx));
    try c.appendChild(a, try ui.widgets.Checkbox(.{ .label_text = "Indeterminate", .indeterminate = true }).mount(scope, cx));
    try c.appendChild(a, try ui.widgets.Checkbox(.{ .label_text = "Disabled", .disabled = true }).mount(scope, cx));
    try c.appendChild(a, status);

    return c;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:184

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

ButtonButton

SwitchSwitch