输入与表单Inputs · 11 / 64

Form Composition

Input · Select · Button

同一尺寸档的 Input、Select、Button 混排：筛选工具栏与业务表单。Input, Select and Button mixed at one size: a filter toolbar and a business form.

BEHAVIOR CONTRACT

三者共用 ControlSize（外框高 XS 20 / SM 24 / MD 32 / LG 40），同档下高度、圆角、字号、图标与间距对齐。All three share ControlSize (box height XS 20 / SM 24 / MD 32 / LG 40), so height, radius, type, icons and spacing line up at each size.

RECORDED INTERACTION

Harness 在工具栏里筛选状态与负责人、输入搜索词，再在表单里填写客户、选择区域和金额。The harness filters by status and owner and types a search in the toolbar, then fills in the customer, region and amount in the form.

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 查看源码View source on GitHubexamples/storybook/form_composition.zig:185

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

SelectSelect

ComboBoxComboBox