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—
—