Stepper

複数ステップのプロセスを案内するナビゲーションコンポーネント。会員登録やチェックアウトフローに使用します。

Basic

最も基本的な水平レイアウトのステッパーです。

variant プロパティを使用して、ステップの表示スタイルを変更できます。

アイコンの代わりに小さなドットを表示するコンパクトなスタイルです。

direction プロパティで、垂直レイアウトに変更できます。モバイルやサイドバーなど、横幅に制限がある場合に適しています。

各ステップオブジェクトの status プロパティを設定することで、特定のエラー状態などを表現できます。指定がない場合は current プロパティの値に基づいて自動的に計算されます。

clickable 属性を付与すると、ステップをクリックして切り替えることができるようになります。この際、juiChange イベントが発火します。

WAI-ARIA:
- ステッパー全体のコンテナは role="list" を持ちます。
- 各ステップは既定では role="listitem" ですが、clickable が真かつそのステップが disabled でない場合は role="button" になります。
- 現在のステップ（current と一致するインデックス）には aria-current="step" が付与され、現在地が支援技術に伝わります。
- 完了・エラー状態を示すチェックマーク／×印の SVG アイコンは aria-hidden="true" で読み上げ対象から除外されます。
キーボードナビゲーション:
- clickable が真かつ disabled でないステップには tabindex="0" が付与され、Tab でフォーカスできます。フォーカスしたステップ上で Enter または Space を押すと、そのステップへの変更（juiChange イベント）が発火します。
- clickable が偽のステップ、および disabled なステップは tabindex が設定されず、キーボードフォーカスの対象になりません（disabled なステップはクリック／キー操作でもイベントを発火しません）。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`clickable`	`clickable`	ステップクリック対応	`boolean`	`false`
`current`	`current`	現在のステップ（0始まり）	`number`	`0`
`direction`	`direction`	レイアウト方向	`"horizontal" \| "vertical"`	`'horizontal'`
`size`	`size`	サイズ	`"md" \| "sm"`	`'md'`
`steps`	`steps`	ステップ定義（JSON文字列 or 配列）	`StepItem[] \| string`	`'[]'`
`variant`	`variant`	表示スタイル	`"default" \| "dot"`	`'default'`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	ステップ変更時に発火	`CustomEvent<{ current: number; step: StepItem; }>`

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS