---
title: WKCheckboxPopup 选项弹窗
group:
  title: 表单组件
  path: /form/
---

## 何时使用

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKButton, WKCheckboxPopup, View, WKRadioPopup } from '@wakeapp/components';

const options = [
  { label: '珠海', value: 1 },
  { label: '中山', value: 2, disabled: true },
  { label: '北京', value: 3 },
  { label: '上海', value: 4 },
  { label: '河北', value: 5 },
  { label: '杭州', value: 6 },
  { label: '郑州', value: 7, disabled: true },
  { label: '长沙', value: 8 },
  { label: '西藏', value: 9, disabled: true },
  { label: '哈尔滨', value: 10 },
];

export default () => {
  const [d1, setD1] = useState(false);
  const [v1, setV1] = useState<number>();
  const [d2, setD2] = useState(false);
  const [v2, setV2] = useState<number[]>([]);
  const [opts, setOpts] = useState({});

  const handleChange1 = (value: number | string) => {
    setV1(value as number);
    setD1(false);
  };

  const handleChange2 = (value: Array<number | string>) => {
    setV2(value as number[]);
    setD2(false);
  };

  return (
    <PageWrapper>
      <View className="modal">
        <View className="title">普通RadioPopup</View>
        <View className="content">
          今年团建旅游点(单选)：{v1 && options[v1 - 1].label}
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={() => {
              setD1(true);
              setOpts({ title: '旅游景点', custom: true });
            }}
            text="请选择"
          />
        </View>

        <View className="title">无标题&自定义勾选</View>
        <View className="content">
          今年团建旅游点(单选)：{v1 && options[v1 - 1].label}
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={() => {
              setD1(true);
              setOpts({ title: '', checkComponent: ({ checked }: { checked: boolean }) => (checked ? '已选择' : '') });
            }}
            text="请选择"
          />
        </View>

        <View className="title">CheckboxPopup&关闭时销毁&可点击遮罩关闭</View>
        <View className="content">
          今年团建旅游点(多选)：{v2.map((i: any) => options[i - 1].label).join('、')}
          <WKButton className="btn" type="info" plain onClick={() => setD2(true)} text="请选择" />
        </View>
      </View>

      <WKRadioPopup
        {...opts}
        visible={d1}
        options={options}
        value={v1}
        onCancel={() => setD1(false)}
        onConfirm={handleChange1}
      />

      <WKCheckboxPopup
        title="旅游景点"
        visible={d2}
        options={options}
        destroyOnClose
        overlayClosable
        value={v2}
        onCancel={() => setD2(false)}
        onConfirm={handleChange2}
      />
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKCheckboxPopup/index.d.ts'></API>

## CheckerOption

| Name               | Description                  | Type                                      | Default |
| ------------------ | ---------------------------- | ----------------------------------------- | ------- |
| className          | 类名                         | `string`                                  |         |
| style              | 样式                         | `React.CSSProperties`                     |         |
| color              | 选中颜色                     | `string`                                  |         |
| value              | 只支持 WKCheckerGroup 中使用 | `string \| number`                        |         |
| disabled           | 禁用                         | `boolean`                                 | `false` |
| reverse            | 改变文本位置                 | `boolean`                                 | `false` |
| checkComponent     | 勾选组件                     | `ReactComponentType<CheckComponentProps>` |         |
| label              | 文本                         | `React.ReactNode`                         |         |
| labelColorVariable | label 的颜色是否可变         | `boolean`                                 |         |

## CheckComponentProps

| Name     | Description    | Type      | Default |
| -------- | -------------- | --------- | ------- |
| multiple | 是否多选       | `boolean` |         |
| color    | 勾选状态颜色值 | `string`  |         |
| checked  | 勾选状态       | `boolean` |         |
| disabled | 是否禁用       | `boolean` |         |
