Skip to content
cascade select in one box
JavaScript TypeScript CSS
Branch: master
Clone or download


React Cascader Component

NPM version build status Test coverage Dependencies DevDependencies npm download

Browser Support

IE Chrome Firefox Opera Safari
IE 8+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔





$ npm install rc-cascader --save


import React from 'react';
import Cascader from 'rc-cascader';

const options = [{
  'label': '福建',
  'value': 'fj',
  'children': [{
    'label': '福州',
    'value': 'fuzhou',
    'children': [{
      'label': '马尾',
      'value': 'mawei',
  }, {
    'label': '泉州',
    'value': 'quanzhou',
}, {
  'label': '浙江',
  'value': 'zj',
  'children': [{
    'label': '杭州',
    'value': 'hangzhou',
    'children': [{
      'label': '余杭',
      'value': 'yuhang',
}, {
  'label': '北京',
  'value': 'bj',
  'children': [{
    'label': '朝阳区',
    'value': 'chaoyang',
  }, {
    'label': '海淀区',
    'value': 'haidian',

  <Cascader options={options}>
, container);



name type default description
options Object The data options of cascade
value Array selected value
defaultValue Array initial selected value
onChange Function(value, selectedOptions) callback when finishing cascader select
changeOnSelect Boolean false change value on each selection
loadData Function(selectedOptions) callback when click any option, use for loading more options
expandTrigger String 'click' expand current item when click or hover
popupVisible Boolean visibility of popup overlay
onPopupVisibleChange Function(visible) callback when popup overlay's visibility changed
transitionName String transition className like "slide-up"
prefixCls String rc-cascader prefix className of popup overlay
popupClassName String additional className of popup overlay
popupPlacement String bottomLeft use preset popup align config from builtinPlacements:bottomRight topRight bottomLeft topLeft
getPopupContainer function(trigger:Node):Node () => document.body container which popup select menu rendered into
dropdownMenuColumnStyle Object style object for each cascader pop menu
fieldNames Object { label: 'label', value: 'value', children: 'children' } custom field name for label and value and children
expandIcon ReactNode > specific the default expand icon
loadingIcon ReactNode > specific the default loading icon


name type default description
label String option text to display
value String option value as react key
disabled Boolean disabled option
children Array children options


$ npm install
$ npm start

Test Case

$ npm test


$ npm run coverage


rc-cascader is released under the MIT license.

You can’t perform that action at this time.