§05-12Search & Navigation
stepped wizard nav
複数ステップの手続きを順に案内する。
長い入力を小分けにして、残りの手順と現在位置を示す。初期設定や申込など、一度に見せると圧倒される手続きに効く。
実装のポイント
現在のステップに aria-current=「step」を付け、完了済みはチェックで示す。各ステップの入力は検証してから進め、戻っても値を保持する。
- 特徴
- 状態管理
- デモで使っているもの
- shadcn/ui
- lucide-react
§05-12Search & Navigation
複数ステップの手続きを順に案内する。
長い入力を小分けにして、残りの手順と現在位置を示す。初期設定や申込など、一度に見せると圧倒される手続きに効く。
現在のステップに aria-current=「step」を付け、完了済みはチェックで示す。各ステップの入力は検証してから進め、戻っても値を保持する。