add api for radio and checkbox

examples/docs/en-US/checkbox.md

@@ -8,6 +8,10 @@
         checked: true,
         checked1: false,
         checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
         isValid: 'valid',
         checkAll: false,
         cities: cityOptions,
@@ -15,8 +19,11 @@
         checkedCities1: ['Shanghai', 'Beijing'],
         isIndeterminate: true,
         checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Beijing'],
-        checkboxGroup3: ['Guangzhou']
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
       };
     },
     methods: {
@@ -190,21 +197,29 @@ The `min` and `max` properties can help you to limit the number of checked items
 
 Checkbox with button styles.
 
-:::demo You just need to change `<el-checkbox>` element into `<el-checkbox-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
+:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
 ```html
 <template>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
@@ -213,8 +228,9 @@ Checkbox with button styles.
     data () {
       return {
         checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Beijing'],
-        checkboxGroup3: ['Guangzhou'],
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
         cities: cityOptions
       };
     }
@@ -223,15 +239,61 @@ Checkbox with button styles.
 ```
 :::
 
+### With borders
+
+:::demo The `border` attribute adds a border to Checkboxes.
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="small">
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</script>
+```
+:::
+
 ### Checkbox Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | value of the checkbox when used inside a `checkbox-group`   | string    |       —        |     —    |
-| true-label | value of the checkbox if it's checked   | string, number    |       —        |     —    |
-| false-label | value of the checkbox if it's not checked   | string, number    |      —         |     —    |
+| label     | value of the Checkbox when used inside a `checkbox-group`   | string / number / boolean   |       —        |     —    |
+| true-label | value of the Checkbox if it's checked   | string / number    |       —        |     —    |
+| false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |
+| disabled  | whether the Checkbox is disabled   | boolean   |  — | false   |
+| border  | whether to add a border around Checkbox  | boolean   | — | false   |
+| size  | size of the Checkbox, only works when `border` is true  | string  | medium / small / mini | — |
 | name | native 'name' attribute | string    |      —         |     —    |
-| disabled  | if the checkbox is disabled   | boolean   |  — | false   |
-| checked  | if the checkbox is checked   | boolean   |  — | false   |
+| checked  | if the Checkbox is checked   | boolean   |  — | false   |
 | indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |
 
 ### Checkbox Events
@@ -242,13 +304,24 @@ Checkbox with button styles.
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
-|size | the size of checkbox buttons | string | large/small | —
-|fill  | border and background color when button is active | string   | — | #20a0ff   |
-|text-color | font color when button is active | string   | — | #ffffff   |
+|size | size of checkbox buttons or bordered checkboxes | string | large/small | — |
+| disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |
+|text-color | font color when button is active | string   | — | #ffffff   |
+|fill  | border and background color when button is active | string   | — | #1989fa   |
 
 ### Checkbox-group Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | change  | triggers when the binding value changes | the updated value |
+
+### Checkbox-button Attributes
+| Attribute      | Description         | Type    | Options                         | Default|
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | value of the checkbox when used inside a `checkbox-group` | string / number / boolean  |       —        |     —    |
+| true-label | value of the checkbox if it's checked | string / number | — |     —    |
+| false-label | value of the checkbox if it's not checked | string / number    |      —         |     —    |
+| disabled  | whether the checkbox is disabled | boolean   |  — | false   |
+| name | native 'name' attribute | string    |      —         |     —    |
+| checked  | if the checkbox is checked | boolean   |  — | false   |

examples/docs/en-US/radio.md

@@ -7,7 +7,12 @@
         radio2: 3,
         radio3: 'New York',
         radio4: 'New York',
-        radio5: 'New York'
+        radio5: 'New York',
+        radio6: 'New York',
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   };
@@ -21,11 +26,11 @@ Single selection among multiple options.
 
 Radio should not have too many options. Otherwise, use the Select component instead.
 
-:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String` or `Number`.
+:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
 ```html
 <template>
-  <el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
-  <el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
+  <el-radio v-model="radio" label="1">Option A</el-radio>
+  <el-radio v-model="radio" label="2">Option B</el-radio>
 </template>
 
 <script>
@@ -47,8 +52,8 @@ Radio should not have too many options. Otherwise, use the Select component inst
 :::demo You just need to add the `disabled` attribute.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
+  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
@@ -67,13 +72,13 @@ Radio should not have too many options. Otherwise, use the Select component inst
 
 Suitable for choosing from some mutually exclusive options.
 
-:::demo Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable with `v-model` of `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event with the current value as its parameter.
+:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
 
 ```html
 <el-radio-group v-model="radio2">
-  <el-radio :label="3">optionA</el-radio>
-  <el-radio :label="6">optionB</el-radio>
-  <el-radio :label="9">optionC</el-radio>
+  <el-radio :label="3">Option A</el-radio>
+  <el-radio :label="6">Option B</el-radio>
+  <el-radio :label="9">Option C</el-radio>
 </el-radio-group>
 
 <script>
@@ -92,28 +97,42 @@ Suitable for choosing from some mutually exclusive options.
 
 Radio with button styles.
 
-:::demo You just need to change `<el-radio>` element into `<el-radio-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
+:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
 ```html
-<el-radio-group v-model="radio3">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
-<div style="margin: 15px 0;"></div>
-<el-radio-group v-model="radio4">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington" :disabled="true"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
-<div style="margin: 15px 0;"></div>
-<el-radio-group v-model="radio5" :disabled="true">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
+<template>
+  <div>
+    <el-radio-group v-model="radio3">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="medium">
+      <el-radio-button label="New York" ></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio5" size="small">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington" disabled ></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio6" disabled size="mini">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
 
 <script>
   export default {
@@ -121,7 +140,50 @@ Radio with button styles.
       return {
         radio3: 'New York',
         radio4: 'New York',
-        radio5: 'New York'
+        radio5: 'New York',
+        radio6: 'New York'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### With borders
+
+:::demo The `border` attribute adds a border to Radios.
+```html
+<template>
+  <div>
+    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio9" size="small">
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border disabled>Option B</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio10" size="mini" disabled>
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border>Option B</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   }
@@ -133,8 +195,10 @@ Radio with button styles.
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string/number/boolean | — | —
-disabled | whether radio is disabled | boolean | — | false
+label | the value of Radio | string / number / boolean | — | —
+disabled | whether Radio is disabled | boolean | — | false
+border  | whether to add a border around Radio  | boolean   | — | false
+size  | size of the Radio, only works when `border` is true  | string  | medium / small / mini | —
 name | native 'name' attribute | string    |      —         |     —
 
 ### Radio Events
@@ -147,9 +211,10 @@ name | native 'name' attribute | string    |      —         |     —
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-size | the size of radio buttons | string | large/small | —
-fill  | border and background color when button is active | string   | — | #20a0ff   |
+size | the size of radio buttons or bordered radios | string | medium / small / mini | —
+disabled  | whether the nesting radios are disabled | boolean   | — | false
 text-color | font color when button is active | string   | — | #ffffff   |
+fill  | border and background color when button is active | string   | — | #1989fa   |
 
 ### Radio-group Events
 
@@ -161,7 +226,6 @@ text-color | font color when button is active | string   | — | #ffffff   |
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string/number | — | —
+label | the value of radio | string / number | — | —
 disabled | whether radio is disabled | boolean | — | false
-
-
+name | native 'name' attribute | string    |      —         |     —

examples/docs/zh-CN/checkbox.md

@@ -8,6 +8,10 @@
         checked: true,
         checked1: false,
         checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
         isValid: '可用',
         checkAll: false,
         cities: cityOptions,
@@ -15,8 +19,11 @@
         checkedCities1: ['上海', '北京'],
         isIndeterminate: true,
         checkboxGroup1: ['上海'],
-        checkboxGroup2: ['北京'],
-        checkboxGroup3: ['广州']
+        checkboxGroup2: ['上海'],
+        checkboxGroup3: ['上海'],
+        checkboxGroup4: ['上海'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
       };
     },
     methods: {
@@ -35,18 +42,6 @@
     }
   };
 </script>
-
-<style>
-  .demo-box.demo-checkbox {
-    .checkbox {
-      margin-right: 5px;
-
-      & + .checkbox {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
 ## Checkbox 多选框
 一组备选项中进行多选
 
@@ -201,21 +196,29 @@
 
 按钮样式的多选组合。
 
-:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性，支持`large`和`small`两种。
+:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。
 ```html
 <template>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['上海', '北京', '广州', '深圳'];
@@ -223,25 +226,71 @@
     data () {
       return {
         checkboxGroup1: ['上海'],
-        checkboxGroup2: ['北京'],
-        checkboxGroup3: ['广州'],
+        checkboxGroup2: ['上海'],
+        checkboxGroup3: ['上海'],
+        checkboxGroup4: ['上海'],
         cities: cityOptions
       };
     }
   }
 </script>
 ```
+:::
 
+### 带有边框
+
+:::demo 设置`border`属性可以渲染为带有边框的多选框。
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="small">
+      <el-checkbox label="备选项1" border></el-checkbox>
+      <el-checkbox label="备选项2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+      <el-checkbox label="备选项1" border></el-checkbox>
+      <el-checkbox label="备选项2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</script>
+```
 :::
 
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string    |       —        |     —    |
-| true-label | 选中时的值   | string, number | — |     —    |
-| false-label | 没有选中时的值   | string, number    |      —         |     —    |
+| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
+| true-label | 选中时的值   | string / number | — |     —    |
+| false-label | 没有选中时的值   | string / number    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| border  | 是否显示边框  | boolean   | — | false   |
+| size  | Checkbox 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
-| disabled  | 按钮禁用    | boolean   |  — | false   |
 | checked  | 当前是否勾选    | boolean   |  — | false   |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
 
@@ -253,13 +302,24 @@
 ### Checkbox-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | Checkbox 按钮组尺寸   | string  | large, small  |    —     |
-| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
-| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |
+| size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |
+| disabled  | 是否禁用    | boolean   | — | false   |
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
+| text-color  | 按钮形式的 Checkbox 激活时的文本颜色    | string   | — | #ffffff   |
+| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #1989fa   |
 
 ### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change  | 当绑定值变化时触发的事件 | 更新后的值 |
+
+### Checkbox-button Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
+| true-label | 选中时的值   | string / number | — |     —    |
+| false-label | 没有选中时的值   | string / number    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| name | 原生 name 属性 | string    |      —         |     —    |
+| checked  | 当前是否勾选    | boolean   |  — | false   |

examples/docs/zh-CN/radio.md

@@ -7,7 +7,12 @@
         radio2: 3,
         radio3: '上海',
         radio4: '上海',
-        radio5: '上海'
+        radio5: '上海',
+        radio6: '上海',
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   };
@@ -21,12 +26,12 @@
 
 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
 
-:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
+:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
 
 ```html
 <template>
-  <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
-  <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
+  <el-radio v-model="radio" label="1">备选项</el-radio>
+  <el-radio v-model="radio" label="2">备选项</el-radio>
 </template>
 
 <script>
@@ -45,7 +50,7 @@
 
 单选框不可用的状态。
 
-:::demo 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
+:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
 ```html
 <template>
   <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
@@ -95,29 +100,41 @@
 
 按钮样式的单选组合。
 
-:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
+:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。
 ```html
 <template>
-  <el-radio-group v-model="radio3">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
-  <div style="margin: 15px 0;"></div>
-  <el-radio-group v-model="radio4">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京" :disabled="true"></el-radio-button>
-    <el-radio-button label="广州"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
-  <div style="margin: 15px 0;"></div>
-  <el-radio-group v-model="radio5" :disabled="true">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
+  <div>
+    <el-radio-group v-model="radio3">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="medium">
+      <el-radio-button label="上海" ></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio5" size="small">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京" disabled ></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio6" disabled size="mini">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
 </template>
 
 <script>
@@ -126,7 +143,50 @@
       return {
         radio3: '上海',
         radio4: '上海',
-        radio5: '上海'
+        radio5: '上海',
+        radio6: '上海'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 带有边框
+
+:::demo 设置`border`属性可以渲染为带有边框的单选框。
+```html
+<template>
+  <div>
+    <el-radio v-model="radio7" label="1" border>备选项1</el-radio>
+    <el-radio v-model="radio7" label="2" border>备选项2</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
+    <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio9" size="small">
+      <el-radio label="1" border>备选项1</el-radio>
+      <el-radio label="2" border disabled>备选项2</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio10" size="mini" disabled>
+      <el-radio label="1" border>备选项1</el-radio>
+      <el-radio label="2" border>备选项2</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   }
@@ -137,8 +197,10 @@
 ### Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | Radio 的 value   | string,number,boolean    |       —        |      —   |
+| label     | Radio 的 value   | string / number / boolean    |       —        |      —   |
 | disabled  | 是否禁用    | boolean   | — | false   |
+| border  | 是否显示边框  | boolean   | — | false   |
+| size  | Radio 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
 
 ### Radio Events
@@ -149,9 +211,10 @@
 ### Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | Radio 按钮组尺寸   | string  | large, small  |    —     |
-| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
-| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |
+| size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |
+| disabled  | 是否禁用    | boolean   | — | false   |
+| text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |
+| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #1989fa   |
 
 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |
@@ -161,5 +224,6 @@
 ### Radio-button Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | Radio 的 value  | string,number  |        —       |     —    |
+| label     | Radio 的 value  | string / number  |        —       |     —    |
 | disabled  | 是否禁用    | boolean   | — | false   |
+| name | 原生 name 属性 | string    |      —         |     —    |

packages/checkbox/src/checkbox-button.vue

@@ -3,20 +3,20 @@
     class="el-checkbox-button"
       :class="[
         size ? 'el-checkbox-button--' + size : '',
-        { 'is-disabled': disabled },
+        { 'is-disabled': isDisabled },
         { 'is-checked': isChecked },
         { 'is-focus': focus },
       ]"
     role="checkbox"
     :aria-checked="isChecked"
-    :aria-disabled="disabled"
+    :aria-disabled="isDisabled"
     >
     <input
       v-if="trueLabel || falseLabel"
       class="el-checkbox-button__original"
       type="checkbox"
       :name="name"
-      :disabled="disabled"
+      :disabled="isDisabled"
       :true-value="trueLabel"
       :false-value="falseLabel"
       v-model="model"
@@ -28,7 +28,7 @@
       class="el-checkbox-button__original"
       type="checkbox"
       :name="name"
-      :disabled="disabled"
+      :disabled="isDisabled"
       :value="label"
       v-model="model"
       @change="handleChange"
@@ -135,6 +135,12 @@
 
       size() {
         return this._checkboxGroup.size;
+      },
+
+      isDisabled() {
+        return this._checkboxGroup
+          ? this._checkboxGroup.disabled || this.disabled
+          : this.disabled;
       }
     },
     methods: {

packages/checkbox/src/checkbox-group.vue

@@ -10,6 +10,7 @@
 
     props: {
       value: {},
+      disabled: Boolean,
       min: Number,
       max: Number,
       size: String,

packages/checkbox/src/checkbox.vue

@@ -1,14 +1,20 @@
 <template>
   <label
     class="el-checkbox"
+    :class="[
+      border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-bordered': border },
+      { 'is-checked': isChecked }
+    ]"
     role="checkbox"
     :aria-checked="indeterminate ? 'mixed': isChecked"
-    :aria-disabled="disabled"
+    :aria-disabled="isDisabled"
     :id="id"
   >
     <span class="el-checkbox__input"
       :class="{
-        'is-disabled': disabled,
+        'is-disabled': isDisabled,
         'is-checked': isChecked,
         'is-indeterminate': indeterminate,
         'is-focus': focus
@@ -21,7 +27,7 @@
         class="el-checkbox__original"
         type="checkbox"
         :name="name"
-        :disabled="disabled"
+        :disabled="isDisabled"
         :true-value="trueLabel"
         :false-value="falseLabel"
         v-model="model"
@@ -32,7 +38,7 @@
         v-else
         class="el-checkbox__original"
         type="checkbox"
-        :disabled="disabled"
+        :disabled="isDisabled"
         :value="label"
         :name="name"
         v-model="model"
@@ -117,6 +123,18 @@
 
       store() {
         return this._checkboxGroup ? this._checkboxGroup.value : this.value;
+      },
+
+      isDisabled() {
+        return this.isGroup
+          ? this._checkboxGroup.disabled || this.disabled
+          : this.disabled;
+      },
+
+      checkboxSize() {
+        return this.isGroup
+          ? this._checkboxGroup.size || this.size
+          : this.size;
       }
     },
 
@@ -130,7 +148,9 @@
       trueLabel: [String, Number],
       falseLabel: [String, Number],
       id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
-      controls: String /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      border: Boolean,
+      size: String
     },
 
     methods: {

packages/radio/src/radio.vue

@@ -1,6 +1,12 @@
 <template>
   <label
     class="el-radio"
+    :class="[
+      border && radioSize ? 'el-radio--' + radioSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-bordered': border },
+      { 'is-checked': model === label }
+    ]"
     role="radio"
     :aria-checked="model === label"
     :aria-disabled="isDisabled"
@@ -48,7 +54,9 @@
       value: {},
       label: {},
       disabled: Boolean,
-      name: String
+      name: String,
+      border: Boolean,
+      size: String
     },
 
     data() {
@@ -81,7 +89,11 @@
           }
         }
       },
-
+      radioSize() {
+        return this.isGroup
+          ? this._radioGroup.size || this.size
+          : this.size;
+      },
       isDisabled() {
         return this.isGroup
           ? this._radioGroup.disabled || this.disabled

packages/theme-chalk/src/checkbox.scss

@@ -5,12 +5,75 @@
 
 @include b(checkbox) {
   color: $--checkbox-color;
+  font-weight: $--checkbox-font-weight;
+  line-height: 1;
   position: relative;
   cursor: pointer;
   display: inline-block;
   white-space: nowrap;
   @include utils-user-select(none);
 
+  @include when(bordered) {
+    padding: $--checkbox-bordered-padding;
+    border-radius: $--border-radius-base;
+    border: $--border-base;
+
+    &.is-checked {
+      border-color: $--color-primary;
+    }
+
+    &.is-disabled {
+      border-color: $--border-color-lighter;
+      cursor: not-allowed;
+    }
+
+    & + .el-checkbox.is-bordered {
+      margin-left: 10px;
+    }
+
+    &.el-checkbox--medium {
+      padding: $--checkbox-bordered-medium-padding;
+      border-radius: $--button-medium-border-radius;
+      .el-checkbox__label {
+        font-size: $--button-medium-font-size;
+      }
+      .el-checkbox__inner {
+        height: $--checkbox-bordered-medium-input-height;
+        width: $--checkbox-bordered-medium-input-width;
+      }
+    }
+    &.el-checkbox--small {
+      padding: $--checkbox-bordered-small-padding;
+      border-radius: $--button-small-border-radius;
+      .el-checkbox__label {
+        font-size: $--button-small-font-size;
+      }
+      .el-checkbox__inner {
+        height: $--checkbox-bordered-small-input-height;
+        width: $--checkbox-bordered-small-input-width;
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+    &.el-checkbox--mini {
+      padding: $--checkbox-bordered-mini-padding;
+      border-radius: $--button-mini-border-radius;
+      .el-checkbox__label {
+        font-size: $--button-mini-font-size;
+      }
+      .el-checkbox__inner {
+        height: $--checkbox-bordered-mini-input-height;
+        width: $--checkbox-bordered-mini-input-width;
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+  }
+
   @include e(input) {
     white-space: nowrap;
     cursor: pointer;
@@ -55,7 +118,7 @@
           }
         }
       }
-      & + .el-checkbox__label {
+      & + span.el-checkbox__label {
         color: $--disabled-color-base;
         cursor: not-allowed;
       }
@@ -69,11 +132,14 @@
           transform: rotate(45deg) scaleY(1);
         }
       }
+
+      & + .el-checkbox__label {
+        color: $--checkbox-checked-text-color;
+      }
     }
     @include when(focus) { /*focus时 视觉上区分*/
       .el-checkbox__inner {
         border-color: $--checkbox-input-border-color-hover;
-        box-shadow: 0 0 1px 0 $--checkbox-input-border-color-hover;
       }
     }
     @include when(indeterminate) {
@@ -85,11 +151,12 @@
           content: '';
           position: absolute;
           display: block;
-          border: 1px solid $--checkbox-checked-icon-color;
-          margin-top: -1px;
-          left: 3px;
-          right: 3px;
-          top: 50%;
+          background-color: $--checkbox-checked-icon-color;
+          height: 2px;
+          transform: scale(0.5);
+          left: 0;
+          right: 0;
+          top: 5px;
         }
 
         &::after {
@@ -118,15 +185,15 @@
     &::after {
       box-sizing: content-box;
       content: "";
-      border: 2px solid $--checkbox-checked-icon-color;
+      border: 1px solid $--checkbox-checked-icon-color;
       border-left: 0;
       border-top: 0;
-      height: 8px;
-      left: 5px;
+      height: 7px;
+      left: 4px;
       position: absolute;
       top: 1px;
       transform: rotate(45deg) scaleY(0);
-      width: 4px;
+      width: 3px;
       transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
       transform-origin: center;
     }
@@ -144,11 +211,11 @@
 
   @include e(label) {
     font-size: $--checkbox-font-size;
-    padding-left: 5px;
+    padding-left: 10px;
   }
 
   & + .el-checkbox {
-    margin-left: 15px;
+    margin-left: 30px;
   }
 }
 
@@ -159,6 +226,7 @@
   @include e(inner) {
     display: inline-block;
     line-height: 1;
+    font-weight: $--checkbox-font-weight;
     white-space: nowrap;
     vertical-align: middle;
     cursor: pointer;
@@ -203,7 +271,7 @@
       color: $--checkbox-button-checked-color;
       background-color: $--checkbox-button-checked-fill;
       border-color: $--checkbox-button-checked-border-color;
-      box-shadow: -1px 0 0 0 $--checkbox-button-checked-border-color;
+      box-shadow: -1px 0 0 0 $--color-primary-light-4;
     }
   }
 
@@ -229,7 +297,6 @@
   &.is-focus {
     & .el-checkbox-button__inner {
       border-color: $--checkbox-button-checked-border-color;
-      box-shadow: 0 0 1px 0 $--checkbox-button-checked-border-color !important;
     }
   }
 

packages/theme-chalk/src/color-picker.scss

@@ -1,3 +1,4 @@
+@import "mixins/mixins";
 @import "common/var";
 
 @include b(color-hue-slider) {

packages/theme-chalk/src/common/var.scss

@@ -76,6 +76,7 @@ $--fill-base: $--color-white;
 $--font-size-base: 14px;
 $--font-color-base: #5a5e66;
 $--font-color-disabled-base: #bbb;
+$--font-weight-primary: 500;
 
 /* Size
 -------------------------- */
@@ -89,9 +90,9 @@ $--index-popper: 2000;
 
 /* Disable base
 -------------------------- */
-$--disabled-fill-base: $--color-primary-light-9;
-$--disabled-color-base: #bbb;
-$--disabled-border-base: $--color-text-placeholder;
+$--disabled-fill-base: $--border-color-extra-light;
+$--disabled-color-base: $--color-text-placeholder;
+$--disabled-border-base: $--border-color-lighter;
 
 /* Icon
 -------------------------- */
@@ -100,10 +101,11 @@ $--icon-color: #666;
 /* Checkbox
 -------------------------- */
 $--checkbox-font-size: 14px;
+$--checkbox-font-weight: $--font-weight-primary;
 $--checkbox-color: $--color-text-regular;
-$--checkbox-input-height: 18px;
-$--checkbox-input-width: 18px;
-$--checkbox-input-border-radius: $--border-radius-base;
+$--checkbox-input-height: 14px;
+$--checkbox-input-width: 14px;
+$--checkbox-input-border-radius: $--border-radius-small;
 $--checkbox-input-fill: $--color-white;
 $--checkbox-input-border: $--border-base;
 $--checkbox-input-border-color: $--border-color-base;
@@ -111,18 +113,30 @@ $--checkbox-icon-color: $--color-white;
 
 $--checkbox-disabled-input-border-color: $--disabled-border-base;
 $--checkbox-disabled-input-fill: $--disabled-fill-base;
-$--checkbox-disabled-icon-color: $--disabled-fill-base;
+$--checkbox-disabled-icon-color: $--color-text-placeholder;
 
-$--checkbox-disabled-checked-input-fill: $--disabled-border-base;
-$--checkbox-disabled-checked-input-border-color: $--disabled-border-base;
-$--checkbox-disabled-checked-icon-color: $--color-white;
+$--checkbox-disabled-checked-input-fill: $--border-color-extra-light;
+$--checkbox-disabled-checked-input-border-color: $--border-color-base;
+$--checkbox-disabled-checked-icon-color: $--color-text-placeholder;
 
-$--checkbox-checked-input-border-color: $--color-primary-light-2;
+$--checkbox-checked-text-color: $--color-primary;
+$--checkbox-checked-input-border-color: $--color-primary;
 $--checkbox-checked-input-fill: $--color-primary;
 $--checkbox-checked-icon-color: $--fill-base;
 
 $--checkbox-input-border-color-hover: $--color-primary;
 
+$--checkbox-bordered-padding: 10px 20px 10px 10px;
+$--checkbox-bordered-medium-padding: 8px 20px 8px 10px;
+$--checkbox-bordered-small-padding: 6px 20px 6px 10px;
+$--checkbox-bordered-mini-padding: 4px 20px 4px 10px;
+$--checkbox-bordered-medium-input-height: 14px;
+$--checkbox-bordered-medium-input-width: 14px;
+$--checkbox-bordered-small-input-height: 12px;
+$--checkbox-bordered-small-input-width: 12px;
+$--checkbox-bordered-mini-input-height: 12px;
+$--checkbox-bordered-mini-input-width: 12px;
+
 $--checkbox-button-font-size: $--font-size-base;
 $--checkbox-button-checked-fill: $--color-primary;
 $--checkbox-button-checked-color: $--color-white;
@@ -133,9 +147,10 @@ $--checkbox-button-checked-border-color: $--color-primary;
 /* Radio
 -------------------------- */
 $--radio-font-size: 14px;
-$--radio-color: $--color-text-primary;
-$--radio-input-height: 18px;
-$--radio-input-width: 18px;
+$--radio-font-weight: $--font-weight-primary;
+$--radio-color: $--color-text-regular;
+$--radio-input-height: 14px;
+$--radio-input-width: 14px;
 $--radio-input-border-radius: $--border-radius-circle;
 $--radio-input-fill: $--color-white;
 $--radio-input-border: $--border-base;
@@ -146,20 +161,33 @@ $--radio-disabled-input-border-color: $--disabled-border-base;
 $--radio-disabled-input-fill: $--disabled-fill-base;
 $--radio-disabled-icon-color: $--disabled-fill-base;
 
-$--radio-disabled-checked-input-fill: $--disabled-border-base;
 $--radio-disabled-checked-input-border-color: $--disabled-border-base;
-$--radio-disabled-checked-icon-color: $--color-white;
+$--radio-disabled-checked-input-fill: $--disabled-fill-base;
+$--radio-disabled-checked-icon-color: $--color-text-placeholder;
 
+$--radio-checked-text-color: $--color-primary;
 $--radio-checked-input-border-color: $--color-primary;
 $--radio-checked-input-fill: $--color-white;
 $--radio-checked-icon-color: $--color-primary;
 
 $--radio-input-border-color-hover: $--color-primary;
 
+$--radio-bordered-padding: 10px 20px 10px 10px;
+$--radio-bordered-medium-padding: 8px 20px 8px 10px;
+$--radio-bordered-small-padding: 6px 20px 6px 10px;
+$--radio-bordered-mini-padding: 4px 20px 4px 10px;
+$--radio-bordered-medium-input-height: 14px;
+$--radio-bordered-medium-input-width: 14px;
+$--radio-bordered-small-input-height: 12px;
+$--radio-bordered-small-input-width: 12px;
+$--radio-bordered-mini-input-height: 12px;
+$--radio-bordered-mini-input-width: 12px;
+
 $--radio-button-font-size: $--font-size-base;
 $--radio-button-checked-fill: $--color-primary;
 $--radio-button-checked-color: $--color-white;
 $--radio-button-checked-border-color: $--color-primary;
+$--radio-button-disabled-checked-fill: $--border-color-extra-light;
 
 /* Select
 -------------------------- */
@@ -343,7 +371,7 @@ $--tab-vertical-header-count-fill: $--color-text-secondary;
 /* Button
 -------------------------- */
 $--button-font-size: 14px;
-$--button-font-weight: 500;
+$--button-font-weight: $--font-weight-primary;
 $--button-border-radius: $--border-radius-base;
 $--button-padding-vertical: 12px;
 $--button-padding-horizontal: 18px;

packages/theme-chalk/src/date-picker/date-table.scss

@@ -1,4 +1,5 @@
 @import "../common/var";
+@import "../mixins/mixins";
 
 @include b(date-table) {
   font-size: 12px;

packages/theme-chalk/src/date-picker/picker.scss

@@ -1,3 +1,4 @@
+@import "../mixins/mixins";
 @import "../common/var";
 @import "../common/transition";
 

packages/theme-chalk/src/form.scss

@@ -1,4 +1,5 @@
 @import "mixins/mixins";
+@import "mixins/utils";
 @import "common/var";
 
 @include b(form) {

packages/theme-chalk/src/menu.scss

@@ -1,4 +1,5 @@
 @import "mixins/mixins";
+@import "mixins/utils";
 @import "common/var";
 
 @mixin menu-item {

packages/theme-chalk/src/radio-button.scss

@@ -13,6 +13,7 @@
     vertical-align: middle;
     background: $--button-default-fill;
     border: $--border-base;
+    font-weight: $--button-font-weight;
     border-left: 0;
     color: $--button-default-color;
     -webkit-appearance: none;
@@ -64,6 +65,9 @@
         border-color: $--button-disabled-border;
         box-shadow: none;
       }
+      &:checked + .el-radio-button__inner {
+        background-color: $--radio-button-disabled-checked-fill;
+      }
     }
   }
 
@@ -77,7 +81,10 @@
   &:focus {
     outline: none;
     .el-radio-button__inner { /*获得焦点时 样式提醒*/
-      box-shadow: 0 0 1px 1px $--radio-button-checked-border-color !important;
+      box-shadow: 0 0 1px 1px $--radio-button-checked-border-color;
+    }
+    &.is-disabled .el-radio-button__inner {
+      box-shadow: none;
     }
   }
   &:last-child {

packages/theme-chalk/src/radio-group.scss

@@ -3,11 +3,6 @@
 
 @include b(radio-group) {
   display: inline-block;
-  font-size: 0;
   line-height: 1;
   vertical-align: middle;
-
-  & .el-radio {
-    font-size: $--radio-font-size;
-  }
 }

packages/theme-chalk/src/radio.scss

@@ -5,21 +5,86 @@
 
 @include b(radio) {
   color: $--radio-color;
+  font-weight: $--radio-font-weight;
+  line-height: 1;
   position: relative;
   cursor: pointer;
   display: inline-block;
   white-space: nowrap;
   @include utils-user-select(none);
 
+  @include when(bordered) {
+    padding: $--radio-bordered-padding;
+    border-radius: $--border-radius-base;
+    border: $--border-base;
+
+    &.is-checked {
+      border-color: $--color-primary;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      border-color: $--border-color-lighter;
+    }
+
+    & + .el-radio.is-bordered {
+      margin-left: 10px;
+    }
+  }
+
+  @include m(medium) {
+    &.is-bordered {
+      padding: $--radio-bordered-medium-padding;
+      border-radius: $--button-medium-border-radius;
+      .el-radio__label {
+        font-size: $--button-medium-font-size;
+      }
+      .el-radio__inner {
+        height: $--radio-bordered-medium-input-height;
+        width: $--radio-bordered-medium-input-width;
+      }
+    }
+  }
+  @include m(small) {
+    &.is-bordered {
+      padding: $--radio-bordered-small-padding;
+      border-radius: $--button-small-border-radius;
+      .el-radio__label {
+        font-size: $--button-small-font-size;
+      }
+      .el-radio__inner {
+        height: $--radio-bordered-small-input-height;
+        width: $--radio-bordered-small-input-width;
+      }
+    }
+  }
+  @include m(mini) {
+    &.is-bordered {
+      padding: $--radio-bordered-mini-padding;
+      border-radius: $--button-mini-border-radius;
+      .el-radio__label {
+        font-size: $--button-mini-font-size;
+      }
+      .el-radio__inner {
+        height: $--radio-bordered-mini-input-height;
+        width: $--radio-bordered-mini-input-width;
+      }
+    }
+  }
+
   &:focus { /*获得焦点时 样式提醒*/
     outline: none;
     .el-radio__inner {
-      box-shadow: 0 0 1px 1px $--radio-input-border-color-hover;
+      border-color: $--color-primary;
+    }
+
+    .is-disabled .el-radio__inner {
+      border-color: $--border-color-base;
     }
   }
 
   & + .el-radio {
-    margin-left: 15px;
+    margin-left: 30px;
   }
 
   @include e(input) {
@@ -56,8 +121,8 @@
           }
         }
       }
-      & + .el-radio__label {
-        color: $--disabled-color-base;
+      & + span.el-radio__label {
+        color: $--color-text-placeholder;
         cursor: not-allowed;
       }
     }
@@ -71,6 +136,10 @@
           transform: translate(-50%, -50%) scale(1);
         }
       }
+
+      & + .el-radio__label {
+        color: $--radio-checked-text-color;
+      }
     }
 
     @include when(focus) {
@@ -83,7 +152,7 @@
     border: $--radio-input-border;
     border-radius: $--radio-input-border-radius;
     width: $--radio-input-width;
-    height: $--radio-input-width;
+    height: $--radio-input-height;
     background-color: $--radio-input-fill;
     position: relative;
     cursor: pointer;
@@ -95,8 +164,8 @@
     }
 
     &::after {
-      width: 6px;
-      height: 6px;
+      width: 4px;
+      height: 4px;
       border-radius: $--radio-input-border-radius;
       background-color: $--color-white;
       content: "";
@@ -122,6 +191,6 @@
 
   @include e(label) {
     font-size: $--radio-font-size;
-    padding-left: 5px;
+    padding-left: 10px;
   }
 }

test/unit/specs/radio.spec.js

@@ -150,7 +150,7 @@ describe('Radio', () => {
         }
       }, true);
       let radio2 = vm.$refs.radio2;
-      expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
+      expect(vm.$el.querySelectorAll('label.is-disabled').length).to.be.equal(3);
       expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
       radio2.$el.click();
       vm.$nextTick(_ => {