# @uiw/react-cascader

> Cascader component

Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/react-cascader
pnpm add @uiw/react-cascader
yarn add @uiw/react-cascader
bun add @uiw/react-cascader
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.22.3 |
| Published | 2023-11-29 |
| First published | 2022-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 38.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 739 |
| Author | Kenny Wong |
| Maintainers | uiwjs, wcjiang |
| Keywords | cascader, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |

## Links

- npm: https://www.npmjs.com/package/@uiw/react-cascader
- Repository: https://github.com/uiwjs/uiw
- Homepage: https://uiwjs.github.io/#/components/cascader
- Issues: https://github.com/uiwjs/uiw/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-cascader

## Dependencies (7)

- [@uiw/utils](https://npm.io/package/@uiw/utils.md) ^4.22.3
- [@uiw/react-tag](https://npm.io/package/@uiw/react-tag.md) ^4.22.3
- [@uiw/react-icon](https://npm.io/package/@uiw/react-icon.md) ^4.22.3
- [@uiw/react-menu](https://npm.io/package/@uiw/react-menu.md) ^4.22.3
- [@uiw/react-input](https://npm.io/package/@uiw/react-input.md) ^4.22.3
- [@uiw/react-loader](https://npm.io/package/@uiw/react-loader.md) ^4.22.3
- [@uiw/react-dropdown](https://npm.io/package/@uiw/react-dropdown.md) ^4.22.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 4.22.3 (latest) — 2023-11-29
- 5.0.0-bate.2.1 (bate) — 2023-03-10
- 4.22.2 — 2023-11-09
- 4.22.1 — 2023-11-08
- 4.22.0 — 2023-09-19
- 4.21.28 — 2023-05-05
- 4.21.27 — 2023-04-21
- 4.21.26 — 2023-04-20
- 4.21.25 — 2023-03-14
- 4.21.24 — 2023-03-08
- 5.0.0-bate.2.0 — 2023-03-02
- 4.21.23 — 2022-12-21
- 4.21.22 — 2022-12-19
- 4.21.21 — 2022-12-19
- 5.0.0-bate-19 — 2022-12-12
- … 46 more at https://npm.io/package/@uiw/react-cascader/versions

## README

Cascader 级联选择
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-cascader/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-cascader.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-cascader)
[![npm version](https://img.shields.io/npm/v/@uiw/react-cascader.svg?label=@uiw/react-cascader)](https://npmjs.com/@uiw/react-cascader)

级联选择框。v4.16.0中添加

```jsx
import { Cascader, Row, Col  } from 'uiw';
// or
import Cascader from '@uiw/react-cascader';
```

## 基础示例

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Cascader, Row } from 'uiw';

const Demo = () => {
  const options = [
    {
      label: '上海市',
      value: 1,
      children: [
        {
          label: '徐汇区',
          value: 4,
          children: [
            { label: '半淞园路街道', value: 6 },
            { label: '南京东路街道', value: 7 },
            { label: '外滩街道', value: 8 },
          ]
        },
      ]
    },
    {
      label: '北京市',
      value: 9,
      children: [
        {
          label: '崇文区',
          value: 12,
          children: [
            { label: '东花市街道', value: 13 },
            { label: '体育馆路街道', value: 14 },
            { label: '前门街道', value: 15 },
          ]
        },
      ]
    },
  ];

  return (
    <Row>
      <Row>
        <Cascader
          style={{ width:200 }}
          allowClear={true}
          placeholder="请选择"
          value={[1, 4, 7]}
          option={options}
          onChange={(value, seleteds) => console.log(value, seleteds)}
        />
      </Row>
      <Row style={{ marginLeft: 20 }}>
        <Cascader
          style={{ width:200 }}
          allowClear={true}
          placeholder="请选择"
          value={[1, 4, 7]}
          disabled={true}
          option={options}
          onChange={(value, seleteds) => console.log(value, seleteds)}
        />
      </Row>
    </Row>
  )
};
export default Demo
```

## 尺寸

```jsx mdx:preview
import React from 'react';
import { Cascader, Row } from 'uiw';

const Demo = () => {
  const options = [
    {
      label: '尺寸', value: 1,
      children: [
        {
          label: 'size',
          value: 2,
          children: [
            { label: '小尺寸', value: 3 },
            { label: '默认尺寸', value: 4 },
            { label: '大尺寸', value: 5 },
          ]
        },
      ]
    }
  ];

  return (
    <Row style={{ flexDirection: 'column' }}>
      <Cascader
        style={{ width: 150 }}
        value={[1, 2, 3]}
        option={options}
        size="small"
      />
      <Cascader
        style={{ width: 175, marginTop: 10 }}
        value={[1, 2, 4]}
        option={options}
      />
      <Cascader
        style={{ width: 200, marginTop: 10 }}
        value={[1, 2, 5]}
        option={options}
        size="large"
      />
    </Row>
  )
};
export default Demo
```

## 搜索选项

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Cascader } from 'uiw';

const Demo = () => {
  const options = [
    {
      label: '上海市',
      value: 1,
      children: [
        {
          label: '徐汇区',
          value: 4,
          children: [
            { label: '半淞园路街道', value: 6 },
            { label: '南京东路街道', value: 7 },
            { label: '外滩街道', value: 8 },
          ]
        },
      ]
    },
    {
      label: '北京市',
      value: 9,
      children: [
        {
          label: '崇文区',
          value: 12,
          children: [
            { label: '东花市街道', value: 13 },
            { label: '体育馆路街道', value: 14 },
            { label: '前门街道', value: 15 },
          ]
        },
      ]
    },
  ];

  return (
    <Cascader
      style={{ width: 200 }}
      allowClear={true}
      placeholder="请选择"
      value={[1, 4, 7]}
      option={options}
      onChange={(value, seleteds) => console.log(value, seleteds)}
      onSearch={(text)=> console.log('text', text)}
    />
  )
};

export default Demo
```

## 移入展开菜单

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Cascader, Row } from 'uiw';

const Demo = () => {

  const options = [
    {
      label: '上海市',
      value: 1,
      children: [
        {
          label: '徐汇区',
          value: 4,
          children: [
            { label: '半淞园路街道', value: 6 },
            { label: '南京东路街道', value: 7 },
            { label: '外滩街道', value: 8 },
          ]
        },
      ]
    },
    {
      label: '北京市',
      value: 9,
      children: [
        {
          label: '崇文区',
          value: 12,
          children: [
            { label: '东花市街道', value: 13 },
            { label: '体育馆路街道', value: 14 },
            { label: '前门街道', value: 15 },
          ]
        },
      ]
    },
  ];

  return (
    <Row style={{ flexDirection: 'column' }}>
      <Cascader
        style={{ width:200 }}
        expandTrigger="hover"
        allowClear={true}
        placeholder="请选择"
        value={[1, 4, 7]}
        option={options}
        onChange={(value, seleteds) => console.log(value, seleteds)}
        onSearch={true}
      />
    </Row>
  )
};
export default Demo
```

### 在表单中使用

在 [`<Form />`](#/components/form) 表单中应用 `<Cascader />` 组件。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Form, Row, Col, Cascader, Button } from 'uiw';

const Demo = () => {
const options = [
    {
      label: '上海市',
      value: 1,
      children: [
        {
          label: '徐汇区',
          value: 4,
          children: [
            { label: '半淞园路街道', value: 6 },
            { label: '南京东路街道', value: 7 },
            { label: '外滩街道', value: 8 },
          ]
        },
      ]
    },
    {
      label: '北京市',
      value: 9,
      children: [
        {
          label: '崇文区',
          value: 12,
          children: [
            { label: '东花市街道', value: 13 },
            { label: '体育馆路街道', value: 14 },
            { label: '前门街道', value: 15 },
          ]
        },
      ]
    },
  ];

  return (
    <div>
      <Form
        onSubmitError={(error) => {
          if (error.filed) {
            return { ...error.filed };
          }
          return null;
        }}
        onSubmit={({initial, current}) => {
          const errorObj = {};
          if (!current.selectField) {
            errorObj.selectField = '默认需要选择内容，选择入内容';
          }
          if(Object.keys(errorObj).length > 0) {
            const err = new Error();
            err.filed = errorObj;
            Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
            throw err;
          }
          Notify.success({
            title: '提交成功！',
            description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,
          });
        }}
        fields={{
          cascader: {
            initialValue:[1, 4, 7],
            children: (
              <Cascader
                allowClear={true}
                onSearch={true}
                placeholder="请选择"
                option={options}
                onChange={(value, seleteds) => console.log(value, seleteds)}
              />
            )
          },
        }}
      >
        {({ fields, state, canSubmit }) => {
          return (
            <div>
              <Row >
                <Col fixed style={{width:200}}>{fields.cascader}</Col>
              </Row>
              <Row>
                <Col fixed>
                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                </Col>
              </Row>
              <Row>
                <Col>
                  <pre style={{ padding: 10, marginTop: 10 }}>
                    {JSON.stringify(state.current, null, 2)}
                  </pre>
                </Col>
              </Row>
            </div>
          )
        }}
      </Form>
    </div>
  );
}
export default Demo
```

## Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---- | ---- | ---- | ---- | ---- |
| allowClear | 支持清除 | Boolean | `false` | - |
| disabled | 禁用选择器 | Boolean | `false` | - |
| placeholder | 选择框默认文字 | String | - | - |
| option | 选项菜单 | { value: String \| Number, label: React.ReactNode, children: Array<String \| Number>} | - | - |
| value | 指定当前选中的条目，多选时为一个数组 | String[] \| Number[] | - | - |
| onChange | 选中选项调用此函数 | function( isSeleted, value, selectedOptions) | - | - |
| onSearch | 开启搜索选项 | functionon(searchText) \| Boolean | - | v4.16.1 |
| size | 选择框尺寸 | Enum{large, default, small } | `default` | v17.0.1 |
| inputProps | 传给[Input](http://localhost:3000/#/components/input)组件的参数 | Object | - | v17.0.1 |
| expandTrigger |	子集菜单的展开方式，'click' 和 'hover' |	String | `click` | v4.18.2 |

---
_Source: https://npm.io/package/@uiw/react-cascader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._