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.
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