components/formcompose
입력과 폼 · 11 / 64

Form Composition

Input · Select · Button

같은 크기 단계의 Input, Select, Button 조합: 필터 툴바와 업무 폼.

BEHAVIOR CONTRACT

세 컴포넌트가 ControlSize(외곽 높이 XS 20 / SM 24 / MD 32 / LG 40)를 공유하므로 같은 단계에서 높이, 모서리, 글자 크기, 아이콘, 간격이 맞춰집니다.

RECORDED INTERACTION

harness가 툴바에서 상태와 담당자로 필터링하고 검색어를 입력한 뒤, 폼에서 고객, 지역, 금액을 입력합니다.

examples/storybook/form_composition.zig:185
pub fn build(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const root = try ui.box(cx, .{ .direction = .column, .gap = 16 }, .{});
    tag(root, "story.formcompose.root");

    try root.appendChild(a, try heading(cx, "Filter toolbar · same size"));
    try root.appendChild(a, try caption(cx, "Input / Select / Button share ControlSize: XS 20 · SM 24 · MD 32 · LG 40 px"));
    inline for (sizes) |spec| {
        try root.appendChild(a, try filterToolbar(spec, scope, cx));
    }

    try root.appendChild(a, try heading(cx, "Business form · MD"));
    try root.appendChild(a, try orderForm(scope, cx));
    return root;
}
GitHub에서 소스 보기examples/storybook/form_composition.zig:185

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