输入与表单Inputs · 12 / 64

ComboBox

ui.widgets.ComboBox

可搜索、可过滤并回填值的组合输入。A searchable, filterable input that writes back its value.

BEHAVIOR CONTRACT

输入 buffer、候选过滤、overlay、active option 和最终 value 分阶段管理。Input buffer, filtering, overlay, active option and final value are staged separately.

RECORDED INTERACTION

Harness 输入 ap，过滤结果随输入出现。The harness types “ap” and the filtered results appear.

examples/storybook/stories.zig:3113

// ── ComboBox / Autocomplete ──
pub fn buildComboBox(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);
    const opts = [_]ui.widgets.ComboOption{
        .{ .value = "ap", .label = "Apple" },
        .{ .value = "ba", .label = "Banana" },
        .{ .value = "ch", .label = "Cherry" },
        .{ .value = "gr", .label = "Grape" },
        .{ .value = "ma", .label = "Mango" },
    };
    const cb = try ui.widgets.ComboBox(.{
        .options = &opts,
        .label_text = "Fruit",
        .placeholder = "Type to search fruit",
        .width = 260,
    }, scope, cx);
    cb.input.meta.ownership.meta.test_id = "story.combobox.input";
    cb.panel.meta.ownership.meta.test_id = "story.combobox.panel";
    try c.appendChild(a, cb.wrapper);
    return c;
}

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

这是 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

Form CompositionForm Composition

TagsInputTagsInput