components/combobox
输入与表单 · 12 / 64

ComboBox

ui.widgets.ComboBox

可搜索、可过滤并回填值的组合输入。

BEHAVIOR CONTRACT

输入 buffer、候选过滤、overlay、active option 和最终 value 分阶段管理。

RECORDED INTERACTION

Harness 输入 ap,过滤结果随输入出现。

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 查看源码examples/storybook/stories.zig:3113

这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。

zenit · 双授权开源项目可按 GPL-3.0-only 免费使用;闭源或商业产品需要商业授权。可联系作者:zongyi.xzy#gmail.com(# 换成 @)zenit 5f9add5+wip 2026-09-30