---
title: WKCheckbox 复选框
group:
  title: 表单组件
  path: /form/
---

## 何时使用

复选框

## 基本使用

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

export default () => {
  const [value, setValue] = useState<(string | number)[]>(['apple']);

  const handleChange = useCallback((evt: { detail: { value: (string | number)[] } }) => {
    setValue(evt.detail.value);
  }, []);

  return (
    <PageWrapper title="基本使用">
      <WKCheckboxGroup onChange={handleChange} value={value}>
        <WKCheckbox value="apple">苹果</WKCheckbox>
        <WKCheckbox value="banana">香蕉</WKCheckbox>
        <WKCheckbox value="pear">梨</WKCheckbox>
      </WKCheckboxGroup>
    </PageWrapper>
  );
};
```

## 改变文本位置

```tsx
/**
 * title: 改变文本位置
 * desc: 通过设置reverse为true改变文本位置,默认文本在右侧
 */
import React, { useState, useCallback } from 'react';
import { WKCheckbox, WKCheckboxGroup } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState<(string | number)[]>(['apple']);

  const handleChange = useCallback((evt: { detail: { value: (string | number)[] } }) => {
    setValue(evt.detail.value);
  }, []);

  return (
    <PageWrapper title="改变文本位置">
      <WKCheckboxGroup onChange={handleChange} value={value}>
        <WKCheckbox value="apple" reverse>
          苹果
        </WKCheckbox>
        <WKCheckbox value="banana" reverse>
          香蕉
        </WKCheckbox>
        <WKCheckbox value="pear" reverse>
          梨
        </WKCheckbox>
      </WKCheckboxGroup>
    </PageWrapper>
  );
};
```

## 自定义选中颜色

```tsx
/**
 * title: 自定义选中颜色
 * desc: 通过color自定义选中颜色。默认主题色
 */
import React, { useState, useCallback } from 'react';
import { WKCheckbox, WKCheckboxGroup } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState<(string | number)[]>(['apple']);

  const handleChange = useCallback((evt: { detail: { value: (string | number)[] } }) => {
    setValue(evt.detail.value);
  }, []);

  return (
    <PageWrapper title="自定义选中颜色">
      <WKCheckboxGroup onChange={handleChange} value={value} color="red">
        <WKCheckbox value="apple">苹果</WKCheckbox>
        <WKCheckbox value="banana">香蕉</WKCheckbox>
        <WKCheckbox value="pear">梨</WKCheckbox>
      </WKCheckboxGroup>
    </PageWrapper>
  );
};
```

## 禁用所有

```tsx
/**
 * title: 禁用
 * desc: 一整个禁用
 */
import React, { useState, useCallback } from 'react';
import { WKCheckbox, WKCheckboxGroup } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState<(string | number)[]>(['apple']);

  const handleChange = useCallback((evt: { detail: { value: (string | number)[] } }) => {
    setValue(evt.detail.value);
  }, []);

  return (
    <PageWrapper title="禁用">
      <WKCheckboxGroup onChange={handleChange} value={value} disabled>
        <WKCheckbox value="apple">苹果</WKCheckbox>
        <WKCheckbox value="banana">香蕉</WKCheckbox>
        <WKCheckbox value="pear">梨</WKCheckbox>
      </WKCheckboxGroup>
    </PageWrapper>
  );
};
```

## 禁用单个

```tsx
/**
 * title: 禁用单个
 * desc: 禁用其中子项
 */
import React, { useState, useCallback } from 'react';
import { WKCheckbox, WKCheckboxGroup } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState<(string | number)[]>(['apple']);

  const handleChange = useCallback((evt: { detail: { value: (string | number)[] } }) => {
    setValue(evt.detail.value);
  }, []);

  return (
    <PageWrapper title="禁用单个">
      <WKCheckboxGroup onChange={handleChange} value={value}>
        <WKCheckbox value="apple" disabled>
          苹果
        </WKCheckbox>
        <WKCheckbox value="banana">香蕉</WKCheckbox>
        <WKCheckbox value="pear">梨</WKCheckbox>
      </WKCheckboxGroup>
    </PageWrapper>
  );
};
```

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