级联选择

Cascader

UI 组件也叫：级联选择器、联动选择、省市区选择、多级下拉

一句话：一个下拉框，展开后按层级一列一列往右选，比如先选省、再选市、最后选区县。

详细解释

级联选择看起来和普通 下拉选择 一样是一个输入框，点开后弹出的却是并排的多列菜单：第一列是省份，选中某个省后右边出现第二列城市，再选城市出现第三列区县，最后输入框里显示「浙江 / 杭州 / 西湖区」。它适合层级固定、每一级都要选的数据，比如地区、商品类目、组织部门。

和 树形控件 的区别：树把整个层级摊开放在页面上，适合浏览和批量勾选；级联选择收在一个下拉框里，占地小，主要用于在表单里选出一个值。和 穿梭框 的区别：穿梭框从平铺列表里挑一批，不强调层级。层级超过四级或每级选项上百个时，级联菜单会很难用，最好加上搜索。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

收货地址里的「所在地区」用级联选择：点击输入框弹出三列菜单，依次选省、市、区县，选中上一级后右侧出现下一级，有下级的选项右侧带小箭头；选完后输入框显示「浙江 / 杭州 / 西湖区」，支持输入关键字直接搜索。

由一个显示已选路径的输入框和弹出的多列菜单组成，每列对应一个层级，有下级的选项带右箭头。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。