Radio
Single-select item.
Type
ComponentType<RadioProps>
Examples
- React
- Vue
export default class PageRadio extends Component {
state = {
list: [
{
value: 'USA',
text: 'United States',
checked: false
},
{
value: 'CHN',
text: 'China',
checked: true
},
{
value: 'BRA',
text: 'Brazil',
checked: false
},
{
value: 'JPN',
text: 'Japan',
checked: false
},
{
value: 'ENG',
text: 'United Kingdom',
checked: false
},
{
value: 'TUR',
text: 'France',
checked: false
}
]
}
render () {
return (
<View className='container'>
<Head title='Radio' />
<View className='page-body'>
<View className='page-section'>
<Text>default style</Text>
<Radio value='selected' checked>Selected</Radio>
<Radio style='margin-left: 20rpx' value='not-selected'>Not Selected</Radio>
</View>
<View className='page-section'>
<Text>recommend style</Text>
<View className='radio-list'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
</View>
</View>
</View>
)
}
}
<template>
<view class="container">
<view class="page-section">
<text>default style</text>
<radio value="selected" :checked="true">Selected</radio>
<radio style="margin-left: 20rpx;" value="not-selected">Not Selected</radio>
</view>
<view class="page-section">
<text>recommend style(Taro Contributors):</text>
<radio-group @change="onChange">
<label v-for="item in list" class="checkbox-list__label">
<radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
</label>
</radio-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
value: 'yuche',
text: 'yuche',
checked: false
},
{
value: 'cjj',
text: 'cjj',
checked: false
},
{
value: 'xiexiaoli',
text: 'xiexiaoli',
checked: false
},
{
value: 'honly',
text: 'honly',
checked: false
},
{
value: 'cs',
text: 'cs',
checked: false
},
{
value: 'zhutianjian',
text: 'zhutianjian',
checked: false
},
{
value: '隔壁老李',
text: '隔壁老李',
checked: true
}
]
}
},
methods: {
onChange: function(e) {
console.log(e.detail.value)
}
}
}
</script>
RadioProps
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| value | string | No | The ID of the `radio` component. When this `radio` is selected, the change event for `radio-group` will carry the value of `radio`. | |
| checked | boolean | false | No | Specifies whether to select the checkbox. |
| disabled | boolean | false | No | Specifies whether to disable the component. |
| color | string | "#09BB07" | No | The color of the radio. It is the same as the color of the css. |
Property Support
| Property | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| RadioProps.value | ✔️ | ✔️ | |
| RadioProps.checked | ✔️ | ✔️ | ✔️ |
| RadioProps.disabled | ✔️ | ✔️ | ✔️ |
| RadioProps.color | ✔️ | ✔️ |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| Radio | ✔️ | ✔️ | ✔️ |