---
nav: default
---
### Radio
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fradio"/>
<a href="demo/#/component/radio" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/radio</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/radio" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group title="default">
      <radio
        :options="radio001"
        @on-change="change"
      />
    </group>

    <group title="preselect 'China'">
      <radio
        v-model="radio001Value"
        :options="radio001"
      />
    </group>

    <group :title="'fill mode value is '+radio001Value">
      <radio
        v-model="radio001Value"
        fill-mode
        :options="radio001"
        @on-change="change"
      />
    </group>

    <group title="fill mode with custom placeholder and label">
      <radio
        fill-mode
        fill-label="Other"
        fill-placeholder="填写其他的哦"
        :options="radio001"
        @on-change="change"
      />
    </group>

    <group title="object options">
      <radio
        fill-mode
        fill-label="Other"
        fill-placeholder="other"
        :options="radio003"
        @on-change="change"
      />
    </group>
  </div>
</template>

<script>
import { Radio, Group } from '../components/_index'

export default {
  components: {
    Radio,
    Group
  },
  data () {
    return {
      radio001: [ 'China', 'Japan' ],
      radio001Value: 1,
      radio002Value: 'Japan',
      radio003: [{
        key: '001',
        value: 'radio001'
      }, {
        key: '002',
        value: 'radio002'
      }]
    }
  },
  methods: {
    change (value) {
      console.log('change:', value)
    }
  }
}
</script>

```

#### Github Issue