ComboBox
ui.widgets.ComboBoxUna entrada con búsqueda y filtrado que escribe de vuelta su valor.
BEHAVIOR CONTRACT
El buffer de entrada, el filtrado, el overlay, la opción activa y el valor final se gestionan por etapas separadas.
RECORDED INTERACTION
El harness escribe “ap” y aparecen los resultados filtrados.
// ── 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;
}El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.
ComboBoxProps
ui.widgets.ComboBoxfn mountComboBox(props: ComboBoxProps, scope: *Scope, cx: *Cx) !ComboBoxMountCampo
Tipo
Predeterminado
Descripción
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.ComboBoxCampo
Tipo
Predeterminado
Descripción
wrapper*Node—
—
input*Node—
Input wrapper(含 label)
panel*Node—
—
is_open*Signal(bool)—
—
state*ComboBoxState—
—