components/formcompose
入力とフォーム · 11 / 64

Form Composition

Input · Select · Button

同じサイズ段階の Input、Select、Button の組み合わせ:フィルターツールバーと業務フォーム。

BEHAVIOR CONTRACT

3 つとも 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