オンボーディングOnboardingFlow
Experimental

初期設定や導入手順を複数ステップに分けて案内するフローです。

状態とバリエーション

標準表示

入力、設定、完了の3ステップを順番に進めます。

コンパクト

狭い面でもステップ内容を読みやすく保ちます。

制御状態

現在ステップを外部 state で管理する構成です。

完了後

最後のステップ後に表示する完了状態です。

プロパティ

表は横にスクロールできます

プロパティ	型	初期値	説明
steps	OnboardingStep[]	-	各ステップのタイトル、説明、内容です。
currentIndex	number	-	外部から現在ステップを制御する場合に使います。
onCurrentIndexChange	(index: number) => void	-	制御時のステップ変更通知です。
onComplete	() => void	-	最後のステップを完了した時に呼び出されます。
progressLabel	string	"Onboarding progress"	ステップインジケーターのアクセシブルラベルです。
stepLabel	(current: number, total: number) => ReactNode	-	現在ステップの補助テキストを生成します。
backDisabledReason	string	"This is the first step."	最初のステップで戻れない理由をツールチップに表示します。
bodyMinHeight	CSSProperties['minHeight']	-	ステップ見出しと本文領域の最小高さです。ステップ移動時の CTA 位置ずれを防ぎます。