Cascader
カスケーダー
カスケーダー（Cascader）は、1つずつレベルごとに選択肢を見せるよ。1つ選ぶと、それに合った次のリストが開くんだ。
実際の例
配送フォームでは、国、都道府県、市町村を聞きます。答えるごとに、次のリストの範囲が絞られていきます。
主な部分
- 01トリガー
- 02レベル列
- 03選択されたパス
以下の場合に使用します
選択肢が安定したツリーを形成し、各レベルに明確な道筋がある場合に使用してください。
以下の場合は使用しないでください
短いリスト、クロスブランチ検索、追加の文脈が必要なラベルの場合は避けてください。
コードで使用する名前
tree path + dependent option columns 出荷前に
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome：Complete the task with カスケーダー (Cascader)。 User context：配送フォームでは、国、都道府県、市町村を聞きます。答えるごとに、次のリストの範囲が絞られていきます。 Recommended pattern：カスケーダー (Cascader)。 Why it fits：選択肢が安定したツリーを形成し、各レベルに明確な道筋がある場合に使用してください。 Do not use it when：短いリスト、クロスブランチ検索、追加の文脈が必要なラベルの場合は避けてください。 Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：これは規範的な標準ではありません。その名前、制限、および期待される挙動は、情報源によって変わる可能性があります。 Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
このリクエストを確認する
Review how カスケーダー (Cascader) is used now. Definition: カスケーダー（Cascader）は、1つずつレベルごとに選択肢を見せるよ。1つ選ぶと、それに合った次のリストが開くんだ。 Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.