ComboBox
ui.widgets.ComboBoxEine durchsuchbare, filterbare Eingabe, die ihren Wert zurückschreibt.
BEHAVIOR CONTRACT
Eingabepuffer, Filterung, Overlay, aktive Option und endgültiger Wert werden in getrennten Stufen verwaltet.
RECORDED INTERACTION
Der Harness tippt „ap“ und die gefilterten Ergebnisse erscheinen.
// ── 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;
}Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). W steht für ui.widgets; col / row / label sind kleine Layout-Helfer des Storybooks.
ComboBoxProps
ui.widgets.ComboBoxfn mountComboBox(props: ComboBoxProps, scope: *Scope, cx: *Cx) !ComboBoxMountFeld
Typ
Standard
Beschreibung
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.ComboBoxFeld
Typ
Standard
Beschreibung
wrapper*Node—
—
input*Node—
Input wrapper(含 label)
panel*Node—
—
is_open*Signal(bool)—
—
state*ComboBoxState—
—