components/combobox
Inputs · 12 / 64

ComboBox

ui.widgets.ComboBox

A searchable, filterable input that writes back its value.

BEHAVIOR CONTRACT

Input buffer, filtering, overlay, active option and final value are staged separately.

RECORDED INTERACTION

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;
}
View source on GitHubexamples/storybook/stories.zig:3113

The story's verbatim source from the Storybook (zenit 4c50245 2026-10-01). W is ui.widgets; col / row / label are small Storybook layout helpers.

zenit · Dual-licensedFree for open-source projects under GPL-3.0-only; closed-source or commercial products need a commercial license.Contact the author: zongyi.xzy#gmail.com (replace # with @)zenit 4c50245 2026-10-01