React single, uncontrolled checkbox element

Using Reactjs, a single, uncontrolled checkbox input element.

by fretwiz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

		<div id="main"></div>

CSS

label, input[type="checkbox"] {
   line-height: 2.1ex;
}

input[type="checkbox"]#checkbox {
    position: absolute;
    left: -999em;
}

input[type="checkbox"]#checkbox + label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
} 

input[type="checkbox"]#checkbox + label::before {
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid #c3c4c6;
   border-radius: 4px;
   margin-right: 0.5em;
}

input[type="checkbox"]#checkbox:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0); 
   top: 0.5ex;
   left: 0.4ex;
   border: 3px solid #60cd18;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg); 
}

JavaScript 1.7

var CheckboxInput = React.createClass({
  onClick: function() {
  	console.log(this.props.value);
  }, 
  render: function () {
    return (
        <div>
            <input type="checkbox"
              id="checkbox"
              name={this.props.name}
              value={this.props.value}
              onClick={this.onClick}
              checked={this.props.value}/>
              <label>{this.props.label}</label>
      </div>
    );
  }
});


var question = { label: "Apples", name: "q1" };

React.render(<CheckboxInput label={question.label} name={question.name} />, document.getElementById("main"));