diff --git a/.eslintrc.json b/.eslintrc.json
index b03453c..7524768 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,7 +4,9 @@
     "react"
   ],
   "env": {
-    "browser": true
+    "browser": true,
+    "node": true,
+    "mocha": true
   },
   "rules": {
     "import/no-extraneous-dependencies": "off",
diff --git a/.gitignore b/.gitignore
index 372e187..1eb30c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,4 +26,5 @@ spm_modules
 .happypack
 dist
 build
+coverage
 assets/**/*.css
diff --git a/demo/CheckboxGroupDemo.jsx b/demo/CheckboxGroupDemo.jsx
index a22de23..0e02aff 100644
--- a/demo/CheckboxGroupDemo.jsx
+++ b/demo/CheckboxGroupDemo.jsx
@@ -20,6 +20,10 @@ class Demo extends React.Component {
       value: ['air'],
       disabled: false,
     };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleChange2 = this.handleChange2.bind(this);
+    this.handleChangeLayout = this.handleChangeLayout.bind(this);
   }
 
   handleChange(value) {
@@ -35,20 +39,38 @@ class Demo extends React.Component {
     });
   }
 
+  handleChangeLayout() {
+    this.setState({
+      verticalAlign: !this.state.verticalAlign,
+    });
+  }
+
   render() {
+    const {
+      disabled,
+      value,
+      verticalAlign,
+    } = this.state;
     return (
-      <div>
+      <div style={{
+        padding: '50px',
+      }}
+      >
         <CheckboxGroup
-          disabled={this.state.disabled}
-          onChange={this.handleChange.bind(this)}
-          value={this.state.value}
+          disabled={disabled}
+          onChange={this.handleChange}
+          value={value}
+          verticalAlign={verticalAlign}
         >
           <Item
             text="天空天空天空"
             value="air"
             addon={
               <Popover overlay={<div>提示</div>}>
-                <i className="kuma-icon kuma-icon-caution" style={{ color: 'blue', fontSize: '12px', marginLeft: '3px' }} />
+                <i
+                  className="kuma-icon kuma-icon-caution"
+                  style={{ color: 'blue', fontSize: '12px', marginLeft: '3px' }}
+                />
               </Popover>
             }
           />
@@ -58,7 +80,8 @@ class Demo extends React.Component {
           <Item text="火车飞机飞机" value="train" />
 
         </CheckboxGroup>
-        <Button onClick={this.handleChange2.bind(this)}>改变 state</Button>
+        <Button onClick={this.handleChange2}>改变 state</Button> &nbsp;
+        <Button onClick={this.handleChangeLayout}>改变布局</Button>
       </div>
     );
   }
diff --git a/src/CheckboxGroup.jsx b/src/CheckboxGroup.jsx
index d070783..683ffc0 100644
--- a/src/CheckboxGroup.jsx
+++ b/src/CheckboxGroup.jsx
@@ -10,7 +10,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Item from './CheckboxItem';
 
-
 const shallowArrayCopy = (a) => {
   const value = a instanceof Array ? [...a] : a;
   return value;
@@ -37,17 +36,25 @@ class CheckboxGroup extends React.Component {
 
   processChild() {
     const me = this;
+    const {
+      value,
+      disabled,
+      verticalAlign,
+    } = me.props;
     const length = React.Children.count(me.props.children);
     if (!length) return false;
     const elements = React.Children.map(me.props.children, (child, index) => {
       if (!!child.type && child.type.displayName === 'CheckboxItem') {
-        const value = me.props.value;
-        return React.cloneElement(child, {
-          jsxdisabled: me.props.disabled,
-          onChange: me.handleChange.bind(me),
-          key: index,
-          checked: ((Array.isArray(value) ? value : [value]).indexOf(child.props.value) !== -1),
-        });
+        return (
+          <span className={`kuma-checkbox-group-${verticalAlign ? 'row' : 'cell'}`}>
+            {React.cloneElement(child, {
+              jsxdisabled: disabled,
+              onChange: me.handleChange.bind(me),
+              key: index,
+              checked: ((Array.isArray(value) ? value : [value]).indexOf(child.props.value) !== -1),
+            })}
+          </span>
+        );
       }
       return null;
     });
@@ -81,6 +88,7 @@ CheckboxGroup.defaultProps = {
   onChange: () => { },
   disabled: false,
   className: 'kuma-checkbox-group',
+  verticalAlign: false,
 };
 
 
@@ -90,6 +98,7 @@ CheckboxGroup.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   className: PropTypes.string,
+  verticalAlign: PropTypes.bool,
 };
 
 CheckboxGroup.displayName = 'CheckboxGroup';
diff --git a/src/CheckboxGroup.less b/src/CheckboxGroup.less
index fb6c78c..ce18c01 100644
--- a/src/CheckboxGroup.less
+++ b/src/CheckboxGroup.less
@@ -26,3 +26,7 @@
         color: @normal-alpha-5;
     }
 }
+
+.@{__checkbox-prefix-cls}-row {
+    display: block;
+}
diff --git a/src/CheckboxItem.jsx b/src/CheckboxItem.jsx
index 44c4801..29aa0f0 100644
--- a/src/CheckboxItem.jsx
+++ b/src/CheckboxItem.jsx
@@ -8,15 +8,26 @@ class CheckboxItem extends React.Component {
     const me = this;
     me.props.onChange(e.currentTarget.checked, me.props.value);
   }
+
   render() {
     const me = this;
-    const { prefixCls, className } = me.props;
+    const {
+      prefixCls,
+      className,
+      checked,
+      addon,
+      showAddonWhenChecked,
+    } = me.props;
     let disabled = false;
     if (me.props.disabled !== undefined) {
       disabled = me.props.disabled;
     } else {
       disabled = me.props.jsxdisabled;
     }
+    let showAddon = true;
+    if (!addon || (showAddonWhenChecked && !checked)) {
+      showAddon = false;
+    }
     return (
       <label
         className={classnames(`${prefixCls}`, {
@@ -27,14 +38,19 @@ class CheckboxItem extends React.Component {
         <input
           type="checkbox"
           disabled={disabled}
-          checked={me.props.checked}
+          checked={checked}
           className="kuma-checkbox"
           onChange={me.handleChange.bind(me)}
         />
         <s />
-        <span className={`${prefixCls}-content`} >
-          <span dangerouslySetInnerHTML={{ __html: me.props.text }} />
-          {me.props.addon}
+        <span className={`${prefixCls}-content`}>
+          <span
+            className="kuma-checkbox-group-item-text"
+            dangerouslySetInnerHTML={{ __html: me.props.text }}
+          />
+          {showAddon ? (
+            <span className="kuma-checkbox-group-item-addon">{addon}</span>
+          ) : null}
         </span>
       </label>
     );
@@ -44,7 +60,10 @@ class CheckboxItem extends React.Component {
 CheckboxItem.defaultProps = {
   value: '',
   prefixCls: 'kuma-checkbox-group-item',
-  onChange() { },
+  onChange() {
+  },
+  addon: null,
+  showAddonWhenChecked: false,
 };
 
 CheckboxItem.propTypes = {
@@ -53,6 +72,8 @@ CheckboxItem.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func,
+  addon: PropTypes.node,
+  showAddonWhenChecked: PropTypes.bool,
 };
 
 CheckboxItem.displayName = 'CheckboxItem';
diff --git a/src/index.js b/src/index.js
index 84c13fb..a9b69ca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,4 +6,6 @@
  * All rights reserved.
  */
 
-export default from './CheckboxGroup';
\ No newline at end of file
+import CheckboxGroup from './CheckboxGroup';
+
+export default CheckboxGroup;
diff --git a/tests/CheckboxGroup.spec.js b/tests/CheckboxGroup.spec.js
deleted file mode 100644
index 90ac14a..0000000
--- a/tests/CheckboxGroup.spec.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import expect from 'expect.js';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import assign from 'object-assign';
-import TestUtils, {Simulate} from 'react-addons-test-utils';
-import Enzyme, {mount, shallow} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15';
-import CheckboxGroup from '../src';
-import CheckboxGroupItem from '../src/CheckboxItem';
-
-Enzyme.configure({adapter: new Adapter()});
-
-function renderWithProps(someProps) {
-    const props = {
-        value: "666",
-        disabled: false
-    };
-    const items = [
-        {disabled: false, value: "apple", text: "苹果"},
-        {value: "banana", text: "香蕉"},
-        {value: "orange", text: "橘子"},
-        {value: "sea", text: "大海"},
-    ];
-    assign(props, someProps);
-    let CheckboxGroupItems = items.map(function (v, i) {
-        return <CheckboxGroupItem disabled={v.disabled} value={v.value} text={v.text}/>;
-    });
-    const wrapper = mount(<CheckboxGroup {...props}>
-        {CheckboxGroupItems}
-    </CheckboxGroup>);
-    return wrapper;
-}
-
-function renderWithProps2() {
-    class Demo extends React.Component {
-        constructor(props) {
-            super(props);
-            this.state = {
-                value: ['air'],
-                disabled: false,
-            };
-        }
-
-        handleChange(value) {
-            this.setState({
-                value,
-            });
-        }
-
-        handleChange2() {
-            this.setState({
-                value: ['air'],
-                disabled: !this.state.disabled,
-            });
-        }
-
-        render() {
-            const items = [
-                {disabled: false, value: "apple", text: "苹果"},
-                {value: "banana", text: "香蕉"},
-                {value: "orange", text: "橘子"},
-                {value: "sea", text: "大海"},
-            ];
-            let CheckboxGroupItems = items.map(function (v, i) {
-                return <CheckboxGroupItem disabled={v.disabled} value={v.value} text={v.text}/>;
-            });
-            return (
-                <div>
-                    <CheckboxGroup
-                        disabled={this.state.disabled}
-                        onChange={this.handleChange.bind(this)}
-                        value={this.state.value}
-                    >
-                        {CheckboxGroupItems}
-
-                    </CheckboxGroup>
-                    {/*<Button onClick={this.handleChange2.bind(this)}>改变 state</Button>*/}
-                </div>
-            );
-        }
-    }
-
-    return mount(
-        <Demo/>
-    );
-}
-
-describe('CheckboxGroup', () => {
-    describe('render', () => {
-        it('should render correctly', (done) => {
-            const wrapper = renderWithProps();
-            expect(wrapper.find('.kuma-checkbox-group-item').length).to.be(4);
-            done();
-        });
-    });
-
-    describe('control', () => {
-        const wrapper = renderWithProps2();
-        it('should handle control correctly', (done) => {
-            wrapper.instance().handleChange("air");
-            expect(wrapper.instance().state.value).to.equal("air");
-            done();
-        });
-    });
-});
\ No newline at end of file
diff --git a/tests/CheckboxGroup.spec.jsx b/tests/CheckboxGroup.spec.jsx
new file mode 100644
index 0000000..e5e34a8
--- /dev/null
+++ b/tests/CheckboxGroup.spec.jsx
@@ -0,0 +1,103 @@
+import expect from 'expect.js';
+import React from 'react';
+import assign from 'object-assign';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+import CheckboxGroup from '../src';
+import CheckboxGroupItem from '../src/CheckboxItem';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+function renderWithProps(someProps) {
+  const props = {
+    value: '666',
+    disabled: false,
+  };
+  const items = [
+    { disabled: false, value: 'apple', text: '苹果' },
+    { value: 'banana', text: '香蕉' },
+    { value: 'orange', text: '橘子' },
+    { value: 'sea', text: '大海' },
+  ];
+  assign(props, someProps);
+  const CheckboxGroupItems = items.map(v => (
+    <CheckboxGroupItem disabled={v.disabled} value={v.value} text={v.text} />
+  ));
+  const wrapper = mount(<CheckboxGroup {...props}>
+    {CheckboxGroupItems}
+  </CheckboxGroup>);
+  return wrapper;
+}
+
+function renderWithProps2() {
+  class Demo extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        value: ['air'],
+        disabled: false,
+      };
+    }
+
+    handleChange(value) {
+      this.setState({
+        value,
+      });
+    }
+
+    handleChange2() {
+      this.setState({
+        value: ['air'],
+        disabled: !this.state.disabled,
+      });
+    }
+
+    render() {
+      const items = [
+        { disabled: false, value: 'apple', text: '苹果' },
+        { value: 'banana', text: '香蕉' },
+        { value: 'orange', text: '橘子' },
+        { value: 'sea', text: '大海' },
+      ];
+      const CheckboxGroupItems = items.map(v => (
+        <CheckboxGroupItem disabled={v.disabled} value={v.value} text={v.text} />
+      ));
+      return (
+        <div>
+          <CheckboxGroup
+            disabled={this.state.disabled}
+            onChange={this.handleChange.bind(this)}
+            value={this.state.value}
+          >
+            {CheckboxGroupItems}
+
+          </CheckboxGroup>
+          {/* <Button onClick={this.handleChange2.bind(this)}>改变 state</Button> */}
+        </div>
+      );
+    }
+  }
+
+  return mount(
+    <Demo />,
+  );
+}
+
+describe('CheckboxGroup', () => {
+  describe('render', () => {
+    it('should render correctly', (done) => {
+      const wrapper = renderWithProps();
+      expect(wrapper.find('.kuma-checkbox-group-item').length).to.be(4);
+      done();
+    });
+  });
+
+  describe('control', () => {
+    const wrapper = renderWithProps2();
+    it('should handle control correctly', (done) => {
+      wrapper.instance().handleChange('air');
+      expect(wrapper.instance().state.value).to.equal('air');
+      done();
+    });
+  });
+});