diff --git a/example/pages/select/index.json b/example/pages/select/index.json
index 5c8fa767..87a16f34 100644
--- a/example/pages/select/index.json
+++ b/example/pages/select/index.json
@@ -1,3 +1,7 @@
 {
-  "navigationBarTitleText": "Select 选择"
+  "navigationBarTitleText": "Select 选择",
+  "usingComponents": {
+    "zan-panel": "/packages/panel/index",
+    "zan-select": "/packages/select/index"
+  }
 }
diff --git a/example/pages/select/index.wxml b/example/pages/select/index.wxml
index 91f72bf6..0061af5a 100644
--- a/example/pages/select/index.wxml
+++ b/example/pages/select/index.wxml
@@ -1,40 +1,24 @@
-<import src="/dist/select/index.wxml" />
 <import src="/dist/toptips/index.wxml" />
 
 <view class="container">
 
   <view class="doc-title zan-hairline--bottom">SELECT</view>
 
-  <view class="zan-panel-title">基础用法</view>
-  <view class="zan-panel">
-    <view>
-      <template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
-    </view>
-  </view>
+  <zan-panel title='基本用法'>
+    <zan-select
+      items="{{ items }}"
+      checkedValue="{{ checked.base }}"
+      bind:change="handleFieldChange"
+    />
+  </zan-panel>
 
-  <view class="zan-panel-title">自定义高亮颜色</view>
-  <view class="zan-panel">
-    <view>
-      <template is="zan-select" data="{{ items, checkedValue: checked.color, activeColor, componentId: 'color' }}" ></template>
-    </view>
-  </view>
-
-  <view class="zan-panel-title">Form 表单中的select应用</view>
-  <form bindsubmit="formSubmit">
-    <view class="zan-panel">
-      <view>
-        <template
-          is="zan-select"
-          data="{{ items, checkedValue: checked.form, name: 'formtest', componentId: 'form' }}" ></template>
-      </view>
-    </view>
-
-    <view class="zan-btns">
-      <button
-        class="zan-btn zan-btn--primary"
-        formType="submit">提交数据</button>
-    </view>
-  </form>
-</view>
+  <zan-panel title='自定义高亮颜色'>
+    <zan-select
+      items="{{ items }}"
+      checkedValue="{{ checked.base }}"
+      activeColor="{{ activeColor }}"
+      bind:change="handleFieldChange"
+    />
+  </zan-panel>
 
 <template is="zan-toptips" data="{{ zanTopTips }}"></template>
diff --git a/packages/select/README.md b/packages/select/README.md
index 494e66ec..f6627d5b 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -1,68 +1,59 @@
 ## Select 选择
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的页面里引入组件库模板和脚本
-```html
-<import src="path/to/zanui-weapp/dist/select/index.wxml" />
-
-<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
-```
-```js
-const { extend, Select } = require('path/to/zanui-weapp/dist/index');
-
-// 在 Page 中混入 Select 里面声明的方法
-Page(extend({}, Select, {
-  // ...
-}));
+在 index.json 中引入组件
+```json
+{
+  "usingComponents": {
+    "zan-select": "/packages/select/index"
+  }
+}
 ```
 
 ### 代码演示
-#### 基础功能
-`Select` 组件通过传入的 items 对象控制显示，用 checkedValue 确认显示的高亮项目
 ```html
-<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
+<zan-select
+  items="{{ items }}"
+  checkedValue="{{ checkedValue }}"
+  activeColor="{{ activeColor }}"
+  bind:change="handleFieldChange"
+/>
+```
+```js
+Page({
+  data: {
+    items: [
+      {
+        // 当前选项离左侧的距离
+        padding: 0,
+        // 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到
+        value: '1',
+        // 选项文案
+        name: '选项一',
+      },
+      {
+        padding: 0,
+        value: '2',
+        name: '选项二',
+      },
+    ],
+    checkedValue: '选项一',
+    activeColor: '#ff4443'
+  },
+
+  methods: {
+    handleFieldChange(event, data) {
+      console.log(event, data);
+    }
+  }
+});
 ```
 
-当 Select 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
-```js
-Page(extend({}, Select, {
-  handleZanSelectChange({ componentId, value }) {
-    // componentId 即为在模板中传入的 componentId
-    // 用于在一个页面上使用多个 Select 时，进行区分
-    // value 表示被选中项的 value
-  }
-}));
-```
+
 
 #### 具体参数
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
 | items | select 显示各个项的配置 | Array | - | |
 | checkedValue | 高亮的 item 的 value 值 | String | - | |
-| name | Select 的名字，作为 form 表单提交时数据的 key | String | - | |
 | activeColor | Select 高亮颜色 | String | #ff4444 | |
-| componentId | 用于区分页面多个 Select 组件 | String | - | |
-
-items 参数格式
-```js
-[
-  {
-    // 当前选项离左侧的距离
-    padding: 0,
-    // 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到
-    value: '1',
-    // 选项文案
-    name: '选项一',
-  },
-  {
-    padding: 0,
-    value: '2',
-    name: '选项二',
-  },
-]
-```
diff --git a/packages/select/index.js b/packages/select/index.js
index 971122dc..5b789b2f 100644
--- a/packages/select/index.js
+++ b/packages/select/index.js
@@ -1,25 +1,27 @@
-const { extractComponentId } = require('../common/helper');
+Component({
+  properties: {
+    items: {
+      type: Array,
+      value: []
+    },
+    name: {
+      type: String,
+      value: ''
+    },
+    checkedValue: {
+      type: String,
+      value: ''
+    },
+    activeColor: {
+      type: String,
+      value: '#ff4444'
+    }
+  },
 
-function handle(e) {
-  const componentId = extractComponentId(e);
-  const value = e.detail.value;
-
-  callback.call(this, componentId, value);
-}
-
-function callback(componentId, value) {
-  const e = { componentId, value };
-  console.info('[zan:Select:change]', e);
-
-  if (this.handleZanSelectChange) {
-    this.handleZanSelectChange(e);
-  } else {
-    console.warn('页面缺少 handleZanSelectChange 回调函数');
+  methods: {
+    _handleZanSelectChange(e) {
+      const value = e.detail.value;
+      this.triggerEvent('change', event, { value });
+    }
   }
-}
-
-module.exports = {
-  _handleZanSelectChange(e) {
-    handle.call(this, e);
-  }
-};
+});
diff --git a/packages/select/index.json b/packages/select/index.json
new file mode 100644
index 00000000..9bab8188
--- /dev/null
+++ b/packages/select/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-icon": "../icon/index",
+    "zan-cell": "../cell/index"
+  }
+}
diff --git a/packages/select/index.wxml b/packages/select/index.wxml
index d53e3561..37deeff1 100644
--- a/packages/select/index.wxml
+++ b/packages/select/index.wxml
@@ -1,24 +1,21 @@
-<template name="zan-select">
-  <radio-group
-    class="zan-select__list"
-    name="{{ name || componentId || '' }}"
-    bindchange="_handleZanSelectChange"
-    data-component-id="{{ componentId }}"
-  >
-    <label wx:for="{{ items }}" wx:key="value">
-      <view class="zan-cell">
-        <radio class="zan-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
-        <view
-          class="zan-cell__bd"
-          style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}"
-        >{{ item.name }}</view>
-        <view wx:if="{{ item.value === checkedValue }}" class="zan-cell__ft">
-          <icon type="success_no_circle" color="{{ parse.getColor(activeColor) }}" size="14"></icon>
-        </view>
-      </view>
-    </label>
-  </radio-group>
-</template>
+<radio-group
+  class="zan-select__list"
+  bindchange="_handleZanSelectChange"
+>
+  <label wx:for="{{ items }}" wx:key="value">
+    <zan-cell>
+      <radio class="zan-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
+      <span style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}">{{ item.name }}</span>
+      <zan-icon
+        wx:if="{{ item.value === checkedValue }}"
+        slot="footer"
+        type="success_no_circle"
+        style="color: {{ parse.getColor(activeColor) }};font-size: 14px;"
+      />
+    </zan-cell>
+  </label>
+</radio-group>
+
 
 <wxs module="parse">
 function getColor(color) {
diff --git a/packages/switch/README.md b/packages/switch/README.md
index 80ef8073..e0550fdc 100644
--- a/packages/switch/README.md
+++ b/packages/switch/README.md
@@ -24,11 +24,9 @@
 ```js
 Page({
   data: {
-    field: {
-      disabled: false,
-      checked: false,
-      loading: false
-    }
+    disabled: false,
+    checked: false,
+    loading: false
   },
 
   methods: {