Cascader
You might say
For the address, let people choose state, then city, then neighborhood one level at a time.
Choose a path one level at a timeA cascader works for data such as country, state, and city or a nested product category. Keep the current path visible and explain whether a parent level can be selected. If users need items from several branches at once, a tree selector is usually clearer.
Know first
You can say this to an AI Agent
Change the shipping-region field to a province → city → district cascader that selects one path at a time, without allowing a parent to become the final result. Show the full path after the panel closes, submit the leaf-region ID, and support full-path search when the option set is large. Test the initial state, level-by-level selection, changing an earlier level, search, and form submission, and confirm the displayed path matches the submitted value.
When to use it
- Region selectionProvince / City / DistrictGuangdong ProvinceShenzhenNanshan District
- Product categoryEngineering / FrontendEngineering ▸Platform Engineering ▸Frontend
- Organization pathElectronics ▸Phones & Communications ▸Smartphones
- Any choice that follows one hierarchy pathAddressGuangdong / Shenzhen / NanshanShow the full path so the selection is unmistakable
When NOT to use it
- Use it for data with no real parent-child relationshipIn progress ▸In progressThe data has one level, so it doesn’t need a second menu
- Hide the chosen path after the panel closesEngineering ×2☑ Engineering☑ Frontend☐ Backend☐ Design
- Use several steps when each level has only a few optionsPublicMembers onlyPrivate
- Make parent selection rules unclearNanshanGuangdong / Shenzhen / NanshanDistrictGuangdong / Guangzhou / NanshanSubdistrict
Anatomy
Nanshan DistrictShenzhen▸Guangzhou City▸
Shows the selected path, such as "Guangdong/Shenzhen/Nanshan"
One level per column; selecting an item opens the next column
An option for the current level
Indicates that this item has child levels; click to expand them to the right
Variants
Region
Guangdong Province▸
Shenzhen City▸
Nanshan District
Addresses and other data with a clear parent-child hierarchy
Path Echo
Guangdong Province / Shenzhen City / Nanshan District
When users need to see every selected level.
Leaf Only
Nanshan District
When the hierarchy only helps with selection and the form should submit just the final-level value.
Searchable
🔍Nanshan
Guangdong Province / Shenzhen City / Nanshan DistrictGuangxi / Guilin City / Nanshan Street
When there are many options and users need to search for a path directly
Typical use cases
Shipping region
Region
Guangdong Province / Shenzhen City / Nanshan District
Guangdong Province▸Guangxi▸
Guangzhou▸Shenzhen▸
Futian DistrictNanshan District
Product category
Product management
Digital electrical appliances / mobile communications
📱
Smartphone Pro
¥ 3,999
🎧
Noise-canceling headphones
¥ 899
⌚
Sports watch
¥ 1,299
Department path
Alex Chen
Technical Center / Front-end Group
Technical Center▸Marketing Department▸
Platform R&D▸Big Data▸
Front-end groupBack-end group
Content taxonomy
Enterprise certification
Company name
Industry
Information Technology / Internet
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check