# Radio

* category: Component
* type: UI Component

---

## API

### Radio

| Attribute  | Explanation                                                                                                               | Type                                        | Default |
| ---------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------- |
| checked    | select, or not. The selection in group is not suitable for the API, but is set by value                                   | boolean                                     |
| disabled   | disable, or not                                                                                                           | boolean                                     | false   |
| size       | size                                                                                                                      | string(small,medium)                        | medium  |
| onChange   | click the callback function that causes the state to change. When `group` is used, there is no callback on a single item. | function(checked,e)                         |
| type       | radio box type                                                                                                            | string（'normal', 'list', 'empty', 'dot' ） | normal  |
| touchStyle | touch area style                                                                                                          | object                                      | {}      |

**Watching：Radio in W3C Standard cannot be deselected in unrestricted scenes.
One of the many radio radio effects, please refer to the use of Radio.group.
Specific reference in `demo/dataSource.md`**

```
<Radio.Group style={styles.groupWrap} onChange = {this.groupChange} value={this.state.group}>
    <View style={styles.demo_item}>
        <Radio size="small"  value="杭州市" type="dot"></Radio>
        <Text>杭州市</Text>
    </View>
    <View style={styles.demo_item}>
        <Radio size="small" value="宁波市" type="dot"></Radio>
        <Text>宁波市</Text>
    </View>
    <View style={styles.demo_item}>
        <Radio size="small" value="温州市" type="dot"></Radio>
        <Text>温州市</Text>
    </View>
    <View style={styles.demo_item}>
        <Radio size="small" value="绍兴市" type="dot"></Radio>
        <Text>绍兴市</Text>
    </View>
</Radio.Group>
```

`this.state.group` represents the value selected in the current group such as
`宁波市`.

### Radio.group

| Attribute      | Explanation                                    | Type              | Default |
| -------------- | ---------------------------------------------- | ----------------- | ------- |
| value          | current selected values                        | any               | ''      |
| onChange       | the callback after the selected value changes  | function(value,e) | ()=>{}  |
| dataSource     | optional data source                           | array             | []      |
| groupItemStyle | `item` external style when `group` is selected | object            | {}      |
| reverse        | reverse label and radio's render order         | bool              | false   |
| renderItem     | custom render method for each item             | function          | ()      |

### Topic replacement

radio component provides the changing theme of skin after the 1.0.0 version.
Specific methods of use can refer to
[nuke-theme-provider](https://www.npmjs.com/package/nuke-theme-provider)。

### Subject variable

Refer `theme.md`.

The definition of variable skin

```
const theme = {
    Radio:{
        'dot-border-color':'red',
        'dot-checked-border-color':'red',
        'dot-bg-color-selected':'red'
    }
};
```

Inject through this styleProvider

```
<StyleProvider style={theme}>
    <Radio size="small" type="dot"></Radio>
    <Text>浙江省</Text>
</StyleProvider>
```

## The Other

* Chat with
  <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@ 翊晨
  [yichen]</a> in Dingtalk desktop App
  <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
* DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />