Cascader
Cascader
Un Cascader mostra le scelte un livello alla volta. Una scelta apre la successiva lista corrispondente.
Un esempio vero
Un modulo di spedizione chiede paese, provincia e città. Ogni risposta restringe la lista successiva.
Parti principali
- 01Attiva
- 02Allinea le colonne
- 03Percorso selezionato
Usalo quando
Usalo quando le scelte formano un albero stabile e ogni livello ha un percorso chiaro.
Non usarlo quando
Evitalo per liste brevi, ricerche tra rami diversi o etichette che hanno bisogno di contesto extra.
Nome usato nel codice
tree path + dependent option columns Prima di spedire
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 (Cascader). User context: Un modulo di spedizione chiede paese, provincia e città. Ogni risposta restringe la lista successiva. Recommended pattern: Cascader (Cascader). Why it fits: Usalo quando le scelte formano un albero stabile e ogni livello ha un percorso chiaro. Do not use it when: Evitalo per liste brevi, ricerche tra rami diversi o etichette che hanno bisogno di contesto extra. 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): Questo non è uno standard normativo. Il suo nome, limiti e comportamento previsto possono cambiare da una fonte all'altra. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Controlla questa richiesta
Review how Cascader (Cascader) is used now. Definition: Un Cascader mostra le scelte un livello alla volta. Una scelta apre la successiva lista corrispondente. 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.