---
nav:
path: /components
group:
title: Information Entry
order: 10
toc: 'content'
---
# Radio
Single selection from a set of options.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-radio": "antd-mini/es/Radio/index",
"ant-radio-group": "antd-mini/es/Radio/RadioGroup/index"
#endif
#if WECHAT
"ant-radio": "antd-mini/Radio/index",
"ant-radio-group": "antd-mini/Radio/RadioGroup/index"
#endif
}
```
## Code Sample
### Basic use
```xml
Initial value
Disable button 1
Custom Colors
Basic Usage
```
```js
Page({
onChange(value, e) {
console.log(value, e);
},
});
```
### Controlled Mode
```xml
Controlled Mode
```
```js
Page({
data: {
checked: false,
},
handleChange(checked) {
#if WECHAT
this.setData({
checked: checked.detail,
});
#endif
#if ALIPAY
this.setData({
checked,
});
#endif
},
});
```
### Radio Group
```xml
```
```js
Page({
data: {
value: 'banana',
options: [
{ value: 'apple', label: '苹果' },
{ value: 'orange', label: '橘子' },
{ value: 'banana', label: '香蕉' },
],
},
handleRadioGroupChange(value) {
#if WECHAT
this.setData({
value: value.detail,
});
#endif
#if ALIPAY
this.setData({
value,
});
#endif
},
});
```
### Demo Code
#1677ff
| #3086ff
| Progress bar main color |
| --progress-trail-color | #f5f5f5
| #121212
| Progress bar track color |
| --progress-success-color | #22b35e
| #34b368
| Progress bar success color |
| --progress-indicator-color | #333333
| #c5cad1
| Progress bar indicator color |
| --progress-exception-color | #ff3141
| #ff4a58
| Progress bar exception color |
| --progress-assist-color | #999999
| #616161
| Progress bar auxiliary color |