# Radio

单选框。用于在多个备选项中选中单个状态。

# Usage

## 基本
```tsx
import React from 'react'
import { Radio } from 'react-icecream'

export default () => <Radio>Radio</Radio>
```

## 禁用
```tsx
import React, { useState } from 'react'
import { Radio, Checkbox } from 'react-icecream'

export default () => {
  const [disabled, setDisabled] = useState(true)
  return (
    <>
      <Radio checked={false} disabled={disabled}>Unchecked</Radio>
      <Radio checked disabled={disabled}>Checked</Radio>
      <br /><br />
      <Checkbox checked={disabled} onChange={setDisabled}>Disabled</Checkbox>
    </>
  )
}
```

## 单选组合
```tsx
import React from 'react'
import { RadioGroup, Radio } from 'react-icecream'

export default () => {
  function onChange(value: string) {
    console.log('new value: ', value)
  }

  const options = [
    { value: 'Shanghai' },
    { value: 'Beijing', disabled: true },
    { value: 'Shenzhen' },
    { value: 'Guangzhou'},
  ]

  return (
    <>
      <RadioGroup onChange={onChange} defaultValue="Shanghai">
        {options.map(o => <Radio key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Radio>)}
      </RadioGroup>
      <br /><br />
      <RadioGroup disabled defaultValue="Shanghai">
        {options.map(o => <Radio key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Radio>)}
      </RadioGroup>
    </>
  )
}
```

## 按钮样式
```tsx
/**
 * desc: 按钮样式的单选组合，将 `radioType` 设置为 `button` 即可。
 */
import React from 'react'
import { RadioGroup, Radio } from 'react-icecream'

export default () => {

  const options = [
    { value: 'Shanghai' },
    { value: 'Beijing', disabled: true },
    { value: 'Shenzhen' },
    { value: 'Guangzhou'},
  ]

  return (
    <>
      <RadioGroup radioType="button" defaultValue="Shanghai">
        {options.map(o => <Radio key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Radio>)}
      </RadioGroup>
      <br /><br />
      <RadioGroup radioType="button" disabled defaultValue="Shanghai">
        {options.map(o => <Radio key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Radio>)}
      </RadioGroup>
    </>
  )
}
```

## 布局
```tsx
/**
 * desc: 通过修改样式或在 `RadioGroup` 内部嵌入其它组件，可实现灵活布局。
 */
import React from 'react'
import { RadioGroup, Radio } from 'react-icecream'

export default () => {

  const options = [
    { value: 'Shanghai' },
    { value: 'Beijing', disabled: true },
    { value: 'Shenzhen' },
    { value: 'Guangzhou'},
  ]

  return (
    <RadioGroup defaultValue="Shanghai">
      {options.map(o => (
        <div style={{ lineHeight: '2' }} key={o.value}>
          <Radio key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Radio>
        </div>
      ))}
    </RadioGroup>
  )
}
```

## 尺寸
```tsx
import React, { useState } from 'react'
import { RadioGroup, Radio } from 'react-icecream'

export default () => {
  const [btnSize, setBtnSize] = useState('default')
  const sizeOptions = ['large', 'default', 'small']
  const cities = ['Shanghai', 'Beijing', 'Shenzhen', 'Guangzhou']

  return (
    <>
      <RadioGroup onChange={setBtnSize} value={btnSize}>
        {sizeOptions.map(size => <Radio key={size} size={size} value={size}>{size}</Radio>)}
      </RadioGroup>
      <br /><br />
      <RadioGroup radioType="button" defaultValue="Beijing">
        {cities.map(city => <Radio key={city} size={btnSize} value={city}>{city}</Radio>)}
      </RadioGroup>
    </>
  )
}
```

<code src="./dev/group-disabled.tsx"></code>

<API></API>