垂直スタックVStackBeta

フォーム、カード、説明ブロックなどを縦方向に積み、余白・揃え・高さ内の配置を制御します。

プレビュー

状態とバリエーション

フォーム項目

ラベル、入力、操作を縦方向に積みます。

中央揃え

短い説明や空状態を中央にまとめます。

G

中央揃え

小さな空状態に向いています。

上下に分離

カード内で内容と操作を上下に分けます。

確認キュー

12件が待機中

右揃え

短い説明と操作を右端に揃えます。

請求情報の更新

短い説明と操作を右端に揃えます。

インライン

小さな説明ブロックを inline-flex として扱います。

インラインスタックテキストに近い流れの中で使えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
gap0..12 の数値ステップ | "none" | "xs" | "sm" | "md" | "lg" | "xl"2子要素間の余白です。数値スケール（gap={6}）でも文字列エイリアス（gap="lg"）でも指定できます。size ではなくスペーシングトークンです。
align"start" | "center" | "end" | "stretch""stretch"横方向の揃え方です。
justify"start" | "center" | "end" | "between" | "around" | "evenly""start"縦方向の配置方法です。
inlinebooleanfalseinline-flex として描画します。

使い方

import { Button, Input, Label, VStack } from "@gunjo/ui";

export function AccountFormStack() {
  return (
    <VStack gap={4} className="w-full max-w-sm rounded-md border bg-background p-4">
      <VStack gap={2}>
        <Label htmlFor="name">名前</Label>
        <Input id="name" defaultValue="Gunjo UI" className="w-full" />
      </VStack>
      <VStack gap={2}>
        <Label htmlFor="email">メール</Label>
        <Input id="email" defaultValue="team@example.com" className="w-full" />
      </VStack>
      <Button className="self-start">保存</Button>
    </VStack>
  );
}

使用コンポーネント

VStack

関連コンポーネント

HStackClusterContainer