Skip to main content
Frontend Glossary

UI components · Form input

Cascader

Also called: Cascading select, Cascading dropdown, Multi-level select, Dependent dropdown

A dropdown that opens into columns you pick from left to right by level, like choosing a state, then a county, then a city.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

In the shipping address form, use a cascader for "Region." Clicking the input opens three columns of menus to pick state, county, and city in order. After picking a level, the next one appears on the right, and options that have a next level show a small arrow on the right. When done, the input shows "Illinois / Sangamon County / Springfield." Also let me type a keyword to search directly.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Cascader is what you need.

Use Cascader when

  • Picking a single value with fixed levels in a form, like state, county, and city, or a product category
  • Every level must be picked, and the final result is a full path
  • Page space is limited, and the hierarchy isn't worth laying out as a whole tree

Pick something else when

  • You need to check several nodes at different levels at once; use a tree with checkboxes

    Use insteadTree

  • The data has no hierarchy; use a regular select

    Use insteadSelect

  • The hierarchy is very deep or one level has hundreds of options, and there's no search

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Closing the menu after a middle level, so users think they're done when a level is still missing

  2. 02

    No search, so users have to dig through dozens of states and counties column by column

  3. 03

    The input only shows the last level, "Springfield," so you can't tell which state it's in

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

An input showing the selected path, plus a pop-up menu with several columns. Each column is one level, and options that have a next level show a right arrow.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A cascader looks like a regular Select, just an input box, but clicking it opens a row of side-by-side menus. The first column lists states. Pick one and a second column of counties appears on the right. Pick a county and a third column of cities appears. The input then shows "Illinois / Sangamon County / Springfield." It suits data with fixed levels where every level must be picked, like regions, product categories, or departments.

How it differs from a Tree: a tree lays out the whole hierarchy on the page, good for browsing and checking several nodes. A cascader tucks it into a dropdown, takes little space, and is mainly for picking one value in a form. How it differs from a Transfer: a transfer picks a batch from a flat list and doesn't care about levels. When there are more than four levels, or a level has hundreds of options, a cascader gets hard to use, so add search.

Developer info
Term ID
component-cascader
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-cascader
  • .ant-cascader-dropdown
  • .el-cascader
  • .el-cascader-panel
  • .arco-cascader
  • .t-cascader
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026