diff --git a/example/app.json b/example/app.json
index bbf00167..3b75d79f 100644
--- a/example/app.json
+++ b/example/app.json
@@ -30,7 +30,8 @@
     "pages/transition/index",
     "pages/tree-select/index",
     "pages/area/index",
-    "pages/submit-bar/index"
+    "pages/submit-bar/index",
+    "pages/radio/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#f8f8f8",
diff --git a/example/config.js b/example/config.js
index 93472137..f215eaaf 100644
--- a/example/config.js
+++ b/example/config.js
@@ -75,6 +75,10 @@ export default [
         path: '/field',
         title: 'Field 输入框'
       },
+      {
+        path: '/radio',
+        title: 'Radio 单选框'
+      },
       {
         path: '/search',
         title: 'Search 搜索'
diff --git a/example/pages/radio/index.js b/example/pages/radio/index.js
new file mode 100644
index 00000000..26086c32
--- /dev/null
+++ b/example/pages/radio/index.js
@@ -0,0 +1,21 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    radio1: '1',
+    radio2: '2',
+    radio3: '1'
+  },
+
+  onChange(event) {
+    const { key } = event.currentTarget.dataset;
+    this.setData({ [key]: event.detail });
+  },
+
+  onClick(event) {
+    const { value } = event.currentTarget.dataset;
+    this.setData({
+      radio3: value
+    });
+  }
+});
diff --git a/example/pages/radio/index.json b/example/pages/radio/index.json
new file mode 100644
index 00000000..f7389e5c
--- /dev/null
+++ b/example/pages/radio/index.json
@@ -0,0 +1,10 @@
+{
+  "navigationBarTitleText": "Search 搜索",
+  "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
+    "van-radio-group": "../../dist/radio-group/index",
+    "van-cell-group": "../../dist/cell-group/index",
+    "van-cell": "../../dist/cell/index",
+    "van-radio": "../../dist/radio/index"
+  }
+}
diff --git a/example/pages/radio/index.wxml b/example/pages/radio/index.wxml
new file mode 100644
index 00000000..85875ed3
--- /dev/null
+++ b/example/pages/radio/index.wxml
@@ -0,0 +1,26 @@
+<demo-block title="基本用法">
+  <van-radio-group value="{{ radio1 }}" data-key="radio1" bind:change="onChange" custom-class="demo-radio-group">
+    <van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
+    <van-radio name="2" custom-class="demo-radio">单选框 2</van-radio>
+  </van-radio-group>
+</demo-block>
+
+<demo-block title="禁用状态">
+  <van-radio-group value="{{ radio2 }}" data-key="radio2" bind:change="onChange" disabled custom-class="demo-radio-group">
+    <van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
+    <van-radio name="2" custom-class="demo-radio">单选框 2</van-radio>
+  </van-radio-group>
+</demo-block>
+
+<demo-block title="与 Cell 组件一起使用">
+  <van-radio-group value="{{ radio3 }}">
+    <van-cell-group>
+      <van-cell title="单选框 1" clickable data-value="1" bind:click="onClick">
+        <van-radio name="1" />
+      </van-cell>
+      <van-cell title="单选框 2" clickable data-value="2" bind:click="onClick">
+        <van-radio name="2" />
+      </van-cell>
+    </van-cell-group>
+  </van-radio-group>
+</demo-block>
diff --git a/example/pages/radio/index.wxss b/example/pages/radio/index.wxss
new file mode 100644
index 00000000..e662d41d
--- /dev/null
+++ b/example/pages/radio/index.wxss
@@ -0,0 +1,7 @@
+.demo-radio-group {
+  padding: 0 17px;
+}
+
+.demo-radio {
+  margin-bottom: 10px;
+}
diff --git a/packages/radio-group/index.js b/packages/radio-group/index.js
new file mode 100644
index 00000000..8ca4e917
--- /dev/null
+++ b/packages/radio-group/index.js
@@ -0,0 +1,37 @@
+import { create } from '../common/create';
+
+create({
+  relations: {
+    '../radio/index': {
+      type: 'descendant',
+      linked(target) {
+        const { value, disabled } = this.data;
+        target.setData({
+          value: value,
+          disabled: disabled || target.data.disabled
+        });
+      }
+    }
+  },
+
+  props: {
+    value: {
+      type: null,
+      observer(value) {
+        const children = this.getRelationNodes('../radio/index');
+        children.forEach(child => {
+          child.setData({ value });
+        });
+      }
+    },
+    disabled: {
+      type: Boolean,
+      observer(disabled) {
+        const children = this.getRelationNodes('../radio/index');
+        children.forEach(child => {
+          child.setData({ disabled: disabled || children.data.disabled });
+        });
+      }
+    }
+  }
+});
diff --git a/packages/radio-group/index.json b/packages/radio-group/index.json
new file mode 100644
index 00000000..0a336c08
--- /dev/null
+++ b/packages/radio-group/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}
diff --git a/packages/radio-group/index.pcss b/packages/radio-group/index.pcss
new file mode 100644
index 00000000..b000b913
--- /dev/null
+++ b/packages/radio-group/index.pcss
@@ -0,0 +1,55 @@
+@import '../common/style/var.pcss';
+
+$van-radio-size: 20px;
+
+.van-radio {
+  overflow: hidden;
+  user-select: none;
+
+  &__input,
+  &__label {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &__input {
+    height: 1em;
+    position: relative;
+    font-size: $van-radio-size;
+  }
+
+  &__control {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__label {
+    line-height: $van-radio-size;
+    margin-left: 10px;
+
+    &--left {
+      float: left;
+      margin: 0 10px 0 0;
+    }
+  }
+
+  &__icon {
+    width: 1em;
+    pointer-events: none;
+    &--disabled {
+      color: $gray-light;
+    }
+    &--checked {
+      color: $green;
+    }
+    &--check {
+      color: $gray-dark;
+    }
+  }
+}
diff --git a/packages/radio-group/index.wxml b/packages/radio-group/index.wxml
new file mode 100644
index 00000000..775ee3ce
--- /dev/null
+++ b/packages/radio-group/index.wxml
@@ -0,0 +1,3 @@
+<view class="custom-class">
+  <slot />
+</view>
diff --git a/packages/radio/README.md b/packages/radio/README.md
new file mode 100644
index 00000000..f64d46be
--- /dev/null
+++ b/packages/radio/README.md
@@ -0,0 +1,91 @@
+## Radio 单选框
+
+### 使用指南
+在 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-radio": "path/to/vant-weapp/dist/radio/index",
+  "van-radio-group": "path/to/vant-weapp/dist/radio-group/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+通过`value`绑定值当前选中项的 name
+
+```html
+<van-radio-group value="{{ radio }}" bind:change="onChange">
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
+```
+
+#### 禁用状态
+通过`disabled`属性禁止选项切换，在`van-radio`上设置`diabled`可以禁用单个选项
+
+```html
+<van-radio-group value="{{ radio }}" bind:change="onChange" disabled>
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
+```
+
+#### 与 Cell 组件一起使用
+此时你需要再引入`Cell`和`CellGroup`组件。
+
+```html
+<van-radio-group value="{{ radio }}" bind:change="onChange">
+  <van-cell-group>
+    <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
+      <van-radio name="2" />
+    </van-cell>
+  </van-cell-group>
+</van-radio-group>
+```
+
+### Radio API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| name | 标识 Radio 名称 | 任意类型 | - |
+| value | 当前选中项的 name | 任意类型 | - |
+| disabled | 是否为禁用状态 | `Boolean` | `false` |
+| label-disabled | 是否禁用文本内容点击 | `Boolean` | `false` |
+| label-position | 文本位置，可选值为 `left` | `String` | `right` |
+
+### Radio Event
+
+| 事件名称 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前选中项的 name |
+
+### Radio 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| icon-class | 图标样式类 |
+| label-class | 描述信息样式类 |
+
+### RadioGroup API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| value | 当前选中项的 name | 任意类型 | - |
+| disabled | 是否禁用所有单选框 | `Boolean` | `false` |
+
+### RadioGroup Event
+
+| 事件名称 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前选中项的 name |
+
+### RadioGroup 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
diff --git a/packages/radio/index.js b/packages/radio/index.js
new file mode 100644
index 00000000..3d40b71c
--- /dev/null
+++ b/packages/radio/index.js
@@ -0,0 +1,49 @@
+import { create } from '../common/create';
+
+create({
+  relations: {
+    '../radio-group/index': {
+      type: 'ancestor'
+    }
+  },
+
+  classes: ['icon-class', 'label-class'],
+
+  props: {
+    name: null,
+    value: null,
+    disabled: Boolean,
+    labelDisabled: Boolean,
+    labelPosition: String
+  },
+
+  computed: {
+    iconClass() {
+      const { disabled, name, value } = this.data;
+      return this.classNames('van-radio__icon', {
+        'van-radio__icon--disabled': disabled,
+        'van-radio__icon--checked': !disabled && name === value,
+        'van-radio__icon--check': !disabled && name !== value
+      });
+    }
+  },
+
+  methods: {
+    emitChange(value) {
+      const parent = this.getRelationNodes('../radio-group/index')[0];
+      (parent || this).$emit('input', value);
+      (parent || this).$emit('change', value);
+    },
+
+    onChange(event) {
+      const { value } = event.detail;
+      this.emitChange(value);
+    },
+
+    onClickLabel() {
+      if (!this.data.disabled && !this.data.labelDisabled) {
+        this.emitChange(this.data.name);
+      }
+    }
+  }
+});
diff --git a/packages/radio/index.json b/packages/radio/index.json
new file mode 100644
index 00000000..0a336c08
--- /dev/null
+++ b/packages/radio/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}
diff --git a/packages/radio/index.pcss b/packages/radio/index.pcss
new file mode 100644
index 00000000..7ba26c83
--- /dev/null
+++ b/packages/radio/index.pcss
@@ -0,0 +1,61 @@
+@import '../common/style/var.pcss';
+
+$van-radio-size: 20px;
+
+.van-radio {
+  overflow: hidden;
+  line-height: 1;
+  user-select: none;
+
+  &__input,
+  &__label {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &__input {
+    position: relative;
+    font-size: $van-radio-size;
+  }
+
+  &__control {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+  }
+
+  &__label {
+    margin-left: 10px;
+    color: $text-color;
+    font-size: 16px;
+    line-height: $van-radio-size;
+
+    &--left {
+      margin: 0 10px 0 0;
+      float: left;
+    }
+  }
+
+  &__icon {
+    pointer-events: none;
+    display: block;
+    line-height: 0;
+
+    &--disabled {
+      color: $gray-light;
+    }
+
+    &--checked {
+      color: $green;
+    }
+
+    &--check {
+      color: $gray-dark;
+    }
+  }
+}
diff --git a/packages/radio/index.wxml b/packages/radio/index.wxml
new file mode 100644
index 00000000..011a7e0e
--- /dev/null
+++ b/packages/radio/index.wxml
@@ -0,0 +1,16 @@
+<view class="van-radio custom-class">
+  <view class="van-radio__input">
+    <radio-group bindchange="onChange">
+      <radio
+        value="{{ name }}"
+        checked="{{ value === name }}"
+        disabled="{{ disabled }}"
+        class="van-radio__control"
+      />
+    </radio-group>
+    <van-icon class="{{ iconClass }}" custom-class="icon-class" name="{{ value === name ? 'checked' : 'check' }}" />
+  </view>
+  <view class="van-radio__label van-radio__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
+    <slot />
+  </view>
+</view>