本文へ移動

§09-01Forms

マルチステップ wizard

長い入力を複数の画面に分け、進捗を示す。

項目の多い申し込みや設定を一度に見せず、段階的に進めさせる。長いフォームを見て離脱されるのを防ぎ、残りの量を把握させる。

実装のポイント

ステップごとに部分スキーマで検証し、通過しないと次へ進めないようにする。入力値は全ステップで 1 つの state に持ち、戻っても消えないようにする。

特徴
  • フォーム
  • 状態管理
デモで使っているもの
  • shadcn/ui
  • lucide-react

このパターンが効く目的