---
title: WKPickerCascaderSelectorItem 级联 picker 选择

group:
  title: 表单
  path: /form/WKForm/
---

## 何时使用

多级 picker 选择器。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { WKForm, WKPickerCascaderSelectorItem, WKView } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

const options = [
  {
    label: '广东',
    value: 1,
    children: [
      {
        label: '珠海',
        value: 11,
      },
      {
        label: '中山',
        value: 12,
      },
      {
        label: '深圳',
        value: 13,
      },
    ],
  },
  {
    label: '广西',
    value: 2,
    children: [
      {
        label: '桂林',
        value: 21,
      },
      {
        label: '南宁',
        value: 22,
      },
    ],
  },
];

export default () => {
  return (
    <PageWrapper title="基本使用">
      <WKView style={{ width: '100%' }}>
        <WKForm className="w-screen">
          <WKPickerCascaderSelectorItem
            label="爱好"
            placeholder="请选择个人爱好"
            options={options}
            path="hobby"
            formItemStyle={{ width: '99vw' }}
          />
        </WKForm>
      </WKView>
    </PageWrapper>
  );
};
```

# API

<API src='@wakeapp/components/WKForm/index.d.ts' hideTitle exports='["WKPickerCascaderSelectorItem"]' ></API>
