components/combobox
입력과 폼 · 12 / 64

ComboBox

ui.widgets.ComboBox

검색과 필터링이 가능하고 값을 다시 채워 넣는 조합 입력.

BEHAVIOR CONTRACT

입력 버퍼, 후보 필터링, overlay, active option, 최종 value를 단계별로 관리합니다.

RECORDED INTERACTION

harness가 “ap”를 입력하면 필터링된 결과가 나타납니다.

examples/storybook/stories.zig:3113
// ── 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;
}
GitHub에서 소스 보기examples/storybook/stories.zig:3113

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

zenit · 이중 라이선스오픈 소스 프로젝트는 GPL-3.0-only로 무료 사용할 수 있으며, 비공개 소스나 상용 제품에는 상용 라이선스가 필요합니다.작성자 연락처: zongyi.xzy#gmail.com (#을 @로 바꾸세요)zenit 5f9add5+wip 2026-09-30