ComboBox
ui.widgets.ComboBox可搜索、可过滤并回填值的组合输入。
BEHAVIOR CONTRACT
输入 buffer、候选过滤、overlay、active option 和最终 value 分阶段管理。
RECORDED INTERACTION
Harness 输入 ap,过滤结果随输入出现。
// ── 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;
}这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。
ComboBoxProps
ui.widgets.ComboBoxfn mountComboBox(props: ComboBoxProps, scope: *Scope, cx: *Cx) !ComboBoxMount字段
类型
默认值
说明
options[]const ComboOption&.{}—
placeholder[]const u8"Type to search…"—
label_text?[]const u8null—
widthf32240—
max_dropdown_heightf32280—
disabledboolfalse—
on_change?core.HandlerRefnull选中提交回调;caller 在回调里读 state.selectedOption()
ComboBoxMount
ui.widgets.ComboBox字段
类型
默认值
说明
wrapper*Node—
—
input*Node—
Input wrapper(含 label)
panel*Node—
—
is_open*Signal(bool)—
—
state*ComboBoxState—
—