Stepper

複数ステップの進行状況を表示するステッパーコンポーネント。ウィザードやフォームに最適。

GitHub でソースを見る

プレビュー

  1. 完了アカウント情報
  2. 完了プロフィール設定
  3. 3確認
  4. 4完了

使いどころ

使う場面

  • 登録、購入、セットアップなど、順番に進める手順の現在地を示す
  • steps に { label } を並べ、step に現在の位置を 0 始まりで渡す。それより前は完了として表示する
  • ステップ数は 3〜5 個が目安

使わない場面

  • ステップをクリックして自由に行き来する操作。Stepper は表示専用。Tabs を使う
  • 作業の進み具合の割合。Progress を使う
  • 順番のない切り替え。Tabs か SegmentedControl を使う
  • ステップが 6 個を超えるとき。手順を分けるか、Progress に切り替える

使い方

<Stepper
  step={2}
  steps={[
    { label: "アカウント情報" },
    { label: "プロフィール設定" },
    { label: "確認" },
    { label: "完了" },
  ]}
/>

プロパティ

名前型デフォルト説明
steps必須StepperStep[]なしステップの配列 { label }
stepnumberなし現在のステップ番号（0始まり。旧 currentStep）

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • <ol> のリストで、現在のステップには aria-current="step" が付く
  • 完了したステップは、チェックアイコンに加えて「完了」が読み上げ用に入る
  • ステップが変わったときの通知はない。画面遷移か見出しの更新で、現在地が伝わるようにする

文言

  • label は 1〜3 語の名詞にする（「情報入力」「確認」「完了」）
  • 手順の最後は「完了」で終える

関連するコンポーネント