Steps

手順と現在の段階を示します。

  1. 日時完了
  2. 連絡先入力中
  3. 確認未入力
段階が多い・名前が長い
  1. 記事の下書き完了
  2. 画像と代替テキスト完了
  3. 公開範囲と共有リンクの確認入力中
  4. 担当者の承認未入力
  5. 公開未入力
すべて終わった
  1. 日時完了
  2. 連絡先完了
  3. 確認完了
狭い場所で縦に積む
  1. 日時完了
  2. 連絡先入力中
  3. 確認未入力
右から左に読む場合
  1. الموعد完了
  2. بيانات الاتصال入力中
  3. التأكيد未入力

使いどころ

  • 申し込みや公開の準備など、いくつかの段階に分かれた作業で、全体の手順と今の段階を示す時に使います。
  • 時系列の出来事はTimeline、一覧のページ送りはPaginationを使います。

使い方

labelとitemsを渡します。各段階はlabelとstateを持ちます。Highriseのインポートの手順と同じく、段階ごとに同じ幅の平らな面を2pxずつ空けて並べます。面に枠と角丸はありません。他の段階は灰色の面(#e9e8e8)に灰色の13pxの文字、currentは淡い青灰色の面(#dfe7eb)に黒い太字の文字です。番号は名前と同じ色の数字で前に置き、completeは番号の代わりに緑のチェックにします。名前の下に「完了」「入力中」「未入力」を灰色の小さな文字(11px)で添えます。

hrefを渡した段階は、名前がリンクになります。完了した段階へ戻れるようにする時などに渡します。未入力の段階へ移れるかは利用側で決めます。

段階は幅に応じて横に並べ、一段階あたり10remに満たない時は折り返します。

アクセシビリティ

  • labelを読み上げ名に持つolで、今の段階にaria-current="step"を付けます。
  • 番号とチェックはaria-hiddenで読み上げず、状態は名前の下の文言で伝えます。

API

Steps

Stepsのprops
名前型既定値説明
label必須string手順の一覧の読み上げ名(「申し込みの手順」など)。
items必須readonly { label: string; state: "complete" | "current" | "upcoming"; href?: string; }[]段階。並べた順に番号を振る。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/icon.css、components/steps.css

itemsの項目

itemsの項目
名前型既定値説明
label必須string段階の名前。
state必須"complete" | "current" | "upcoming"段階の状態。complete(完了)は番号の代わりにチェック、current(入力中)はaria-current="step"を付ける。名前の下に「完了」「入力中」「未入力」の文言を添える。
hrefstring渡すと、名前をその段階へのリンクにする。

コード

HTML
Hono JSX