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

## 何时使用

单选框

## 基本使用

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

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

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

  return (
    <PageWrapper title="基本使用">
      <WKRadioGroup value={value} onChange={handleChange}>
        <WKRadio label="男" value="man" />
        <WKRadio label="女" value="women" />
      </WKRadioGroup>
    </PageWrapper>
  );
};
```

## 禁用

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

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

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

  return (
    <PageWrapper title="禁用">
      <WKRadioGroup value={value} onChange={handleChange} disabled>
        <WKRadio label="男" value="man" />
        <WKRadio label="女" value="women" />
      </WKRadioGroup>
    </PageWrapper>
  );
};
```

## 禁用单个

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

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

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

  return (
    <PageWrapper title="禁用单个">
      <WKRadioGroup value={value} onChange={handleChange}>
        <WKRadio label="男" value="man" disabled />
        <WKRadio label="女" value="women" />
      </WKRadioGroup>
    </PageWrapper>
  );
};
```

## 自定义选中颜色

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

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

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

  return (
    <PageWrapper title="自定义选中颜色">
      <WKRadioGroup value={value} onChange={handleChange} color="red">
        <WKRadio label="男" value="man" />
        <WKRadio label="女" value="women" />
      </WKRadioGroup>
    </PageWrapper>
  );
};
```

## 改变文本位置

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

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

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

  return (
    <PageWrapper title="改变文本位置">
      <WKRadioGroup value={value} onChange={handleChange}>
        <WKRadio label="男" value="man" reverse />
        <WKRadio label="女" value="women" reverse />
      </WKRadioGroup>
    </PageWrapper>
  );
};
```

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