ComboBox
ui.widgets.ComboBox検索・絞り込みができ、値を書き戻す複合入力。
BEHAVIOR CONTRACT
入力バッファ、候補の絞り込み、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—
—