Input & controls

Cascader

Q: How do I implement a Cascader?

Build a cascader for location: columns for Country → State → City (English place names), trigger shows the full path when complete, typeahead search that can jump levels, and async loading for child options. On small screens use stacked drill-in lists instead of three columns.

Linked multi-column hierarchy: each choice loads the next level’s options.

Also known as cascading select · multi-level select · hierarchical picker

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Cascader".

Build a cascader for location: columns for Country → State → City (English place names), trigger shows the full path when complete, typeahead search that can jump levels, and async loading for child options. On small screens use stacked drill-in lists instead of three columns.

Anatomy:
- column / menu: One level per column; desktop often expands sideways.
- cascade: Parent selection refreshes children.
- display path: Completed value shows “United States / California / San Francisco”.
- search: Type “San Francisco” and skip the drill—required at scale.

Preferred API / pattern: `custom cascade / rc-cascader patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: No search on a deep tree
○Avoid: Path not shown in the trigger
○Avoid: Desktop three-column forced on mobile
○Avoid: Clearing parent doesn’t reset children

In plain wordsHow people search for it

“pick Country, then State, then City and each column filters the next”“the multi-column picker where the second list depends on the first”“nested location dropdowns that drill down a level at a time”

AnatomyOpen for part names

column / menu: One level per column; desktop often expands sideways.
cascade: Parent selection refreshes children.
display path: Completed value shows “United States / California / San Francisco”.
search: Type “San Francisco” and skip the drill—required at scale.

How to write itOpen for stack patterns

Web (HTML/CSS)combobox + multi-column listboxes (no native)

React + Tailwind + shadcn/uicustom cascade / rc-cascader patterns

SwiftUIlinked Pickers / NavigationStack drills

Ant Design<Cascader options loadData showSearch />

Notes

Canonical English example: Country → State → City (not province/district tables). Same pattern for product categories. Support async loadData for large trees and typeahead that jumps levels. Mobile may use stacked full-screen lists instead of three columns.

Common mistakesHumans and models trip here

No search on a deep tree: scrolling thousands of cities is a failure mode.
Path not shown in the trigger: users can’t tell what they picked.
Desktop three-column forced on mobile: unusable—stack levels.
Clearing parent doesn’t reset children: stale city under a new country.

More failure symptoms on AI broke it.

Related patterns

Select / ComboboxA form control for choosing one (or more) options from a list.Date PickerPick a date (or range) from a calendar grid or mobile wheels.Tree ViewA hierarchical list where nodes expand and collapse to reveal children.Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.

Spotted a wrong name or missing pattern?

Message on X