SwitchBox react control for a checkbox with special designer markup to look like a lightswitch

SwitchBox.js

/** @jsx React.DOM */
define([
    'underscore', 'jquery', 'react', 'platform/uuid'
], function (_, $, React, uuid) {
    'use strict';

    /**
     * SwitchBox control (checkbox with special markup to look like a light switch).
     * Can be configured with an optional `onChange` prop to effect state up the tree.
     */
    return React.createClass({

        getDefaultProps: function () {
            return {
                onChange: function (event) { void event; } // optional hook to propagate event upwards
            };
        },

        getInitialState: function () {
            // Use this.props.checked if passed in and truthy else default false
            return { value: (!!this.props.checked) || false };
        },

        render: function () {
            var id = uuid();

            return (
                <span>
                    <input type="checkbox" id={id} class="switchBox"
                           checked={this.state.value}
                           onChange={this.onChange} />
                    <label htmlFor={id}></label>
                    <div class="clear" />
                </span>
            );
        },

        onChange: function (event) {
            this.setState({ value: event.target.checked });
            this.props.onChange(event);
        }
    });

});