# Radio

单选框组件，支持单独使用和分组使用，提供多种类型和尺寸。

## 适用场景

- 表单中的单选项选择
- 一组互斥选项中选择一个
- 需要按钮样式的单选切换（intensive/important 类型）

## Props

### Radio Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| onChange | `(e: ChangeEvent<HTMLInputElement>, checked: boolean, data: any) => void` | - | 否 | checked 变化时的回调 |
| onClick | `(e: MouseEvent<Element, MouseEvent>) => void` | - | 否 | 点击回调 |
| defaultChecked | `boolean` | `false` | 否 | 默认是否勾选 |
| type | `"normal" \| "intensive" \| "important"` | `"normal"` | 否 | 类型 |
| size | `"sm" \| "md" \| "lg"` | - | 否 | 尺寸，默认取 config context `baseSize` |
| checked | `boolean` | - | 否 | 控制是否勾选 |
| disabled | `boolean` | `false` | 否 | 是否禁用 |
| data | `unknown` | - | 否 | 附加数据，onChange 回调时带回 |

### RadioGroup Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| value | `RadioGroupValue` | - | 否 | 控制选中值（`null` 为"未选择"，`undefined` 为不控制） |
| defaultValue | `RadioGroupValue` | `null` | 否 | 默认选中值（`null` 为"未选择"，`undefined` 使用内置默认值 `null`） |
| onCheck | `(option: GenericCheckboxOption, value: RadioGroupValue, currentValue: RadioGroupValue) => void` | - | 否 | 点选 option 的回调 |
| onChange | `((nextValue: string) => void) \| ((nextValue: number) => void) \| ((nextValue: boolean) => void)` | - | 否 | 值变化回调 |
| type | `"normal" \| "intensive" \| "important"` | `"normal"` | 否 | 类型 |
| size | `"sm" \| "md" \| "lg"` | - | 否 | 尺寸，默认取 config context `baseSize` |
| disabled | `boolean` | `false` | 否 | 是否整组禁用 |
| layout | `"horizontal" \| "vertical"` | `"horizontal"` | 否 | 选项布局 |
| options | `GenericCheckboxGroupOptions` | - | 否 | 选项列表 |

## 典型用法

### 单独使用

```tsx
import { useState } from 'react'
import { Radio } from '@befe/brick'

const [checked, setChecked] = useState(true)

<Radio checked={checked} onChange={(e, checked) => setChecked(checked)}>
    一个选项
</Radio>
<Radio disabled>禁用的选项</Radio>
```

### RadioGroup 基础用法

```tsx
import { useState } from 'react'
import { RadioGroup } from '@befe/brick'

const options = [
    {value: 'item-1', label: '方案'},
    {value: 'item-2', label: '禁用方案', disabled: true},
    {value: 'item-3', label: '备选方案 XXX'},
]
const [value, setValue] = useState<string | null>('item-1')

<RadioGroup value={value} options={options} onChange={setValue} />
// 禁用整组
<RadioGroup value={value} options={options} disabled />
```

### 类型

```tsx
// 加强样式
<RadioGroup type="intensive" value={value} options={options} onChange={setValue} />
// 重要样式（按钮风格）
<RadioGroup type="important" value={value} options={options} onChange={setValue} />
```

### 垂直布局

```tsx
// layout 'vertical' 每个选项占 1 行
<RadioGroup layout="vertical" options={options} />
```

### 尺寸

```tsx
<RadioGroup size="sm" defaultValue="item-1" options={options} />
<RadioGroup size="md" defaultValue="item-1" options={options} />
<RadioGroup size="lg" defaultValue="item-1" options={options} />
```

## 注意事项

- `value` 区分 `null` 与 `undefined`：`null` 为控制值"未选择"，`undefined` 为不控制
- 横向多行需要"列等宽"效果时，可通过 CSS 为 `.brick-radio` 设置固定宽度实现
- 不支持 `props.style`
- BREAKING CHANGE：2020 年类型 `intensive` 改名为 `important`，新增加强样式命名为 `intensive`