radio 单选框

单选框（Radio Button）是一种常见的用户界面组件，用于从一组互斥的选项中选择一个选项。每个单选框通常与一个文本标签相关联，以描述选项的含义。当用户选择一个单选框时，其他选项将自动取消选择。

Props参数

名称	类型	是否必传	默认值	描述
checked	boolean	否	-	当前是否选中
value	any	否	-	值
配合Radio.Group使用
disabled	boolean	否	-	禁用
size	ComponentSize	否	-	设置组件尺寸

示例

import MMRadio from '../../components/radio'
import PageDemoBlock from '../_components/page-demo-block'
import { useState } from 'react'
import MMPageContainer from '../_components/page-container'

export default () => {
  const [checked, setChecked] = useState(false)

  const [value, setValue] = useState(1)

  return (
    <MMPageContainer title="单选框">
      <PageDemoBlock title="单个使用">
        <MMRadio checked={checked} onChange={setChecked}>
          单选
        </MMRadio>
        <MMRadio checked={checked} disabled>
          禁用
        </MMRadio>
      </PageDemoBlock>

      <PageDemoBlock title="搭配Group使用">
        <MMRadio.Group value={value} onChange={(va) => setValue(va!)}>
          <MMRadio value={1}>单选1</MMRadio>
          <MMRadio value={2}>单选2</MMRadio>
          <MMRadio value={3}>单选3</MMRadio>
        </MMRadio.Group>
      </PageDemoBlock>

      <PageDemoBlock title="水平排列">
        <MMRadio.Group value={value} onChange={(va) => setValue(va!)} direction="horizontal">
          <MMRadio value={1}>单选1</MMRadio>
          <MMRadio value={2}>单选2</MMRadio>
          <MMRadio value={3}>单选3</MMRadio>
        </MMRadio.Group>
      </PageDemoBlock>

      <PageDemoBlock title="禁用">
        <MMRadio.Group value={value} onChange={(va) => setValue(va!)}>
          <MMRadio value={1}>单选1</MMRadio>
          <MMRadio value={2} disabled>
            单选2
          </MMRadio>
          <MMRadio value={3}>单选3</MMRadio>
        </MMRadio.Group>
      </PageDemoBlock>
    </MMPageContainer>
  )
}