initial implementation of checkbox ui component

ui/src/components/checkbox/index.js

@@ -0,0 +1,44 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Checkbox = ({
+  checked = false,
+  className,
+  children,
+  disabled = false,
+  onChange,
+  style
+}) => {
+  const cn = classNames(
+    className,
+    styles.checkbox,
+    checked ? styles.checked : '',
+    disabled ? styles.disabled : ''
+  );
+
+  return (
+    <label className={styles.label}>
+      <input
+        className={cn}
+        style={style}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        type='checkbox'
+      />
+      <span>{children}</span>
+    </label>
+  );
+};
+
+Checkbox.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  checked: React.PropTypes.bool,
+  disabled: React.PropTypes.bool,
+  onChange: React.PropTypes.func,
+  style: React.PropTypes.object
+};
+
+module.exports = Checkbox;

ui/src/components/checkbox/readme.md

@@ -0,0 +1,42 @@
+# `<Checkbox>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Checkbox = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Container>
+      <Row>
+        <Column>
+          <Checkbox checked>
+            Checkbox checked
+          </Checkbox>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <Checkbox>
+            Checkbox unchecked
+          </Checkbox>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <Checkbox disabled>
+            Checkbox disabled
+          </Checkbox>
+        </Column>
+      </Row>
+    </Container>
+  </Base>
+);
+```

ui/src/components/checkbox/style.css

@@ -0,0 +1,8 @@
+input[type='checkbox'] {
+  &.checkbox {
+  }
+}
+
+.label {
+  color: #646464;
+}

ui/src/docs.js

@@ -10,7 +10,8 @@ module.exports = {
     Row: require('./components/row/readme.md'),
     Column: require('./components/column/readme.md'),
     Button: require('./components/button/readme.md'),
-    Toggle: require('./components/toggle/readme.md')
+    Toggle: require('./components/toggle/readme.md'),
+    Checkbox: require('./components/checkbox/readme.md')
   },
   FAQ: require('./faq.md')
 };

ui/src/index.js

@@ -1,6 +1,7 @@
 module.exports = {
   Base: require('./components/base'),
   Button: require('./components/button'),
+  Checkbox: require('./components/checkbox'),
   Column: require('./components/column'),
   Container: require('./components/container'),
   Row: require('./components/row'),