A sample checkbox whose outerlayer is an instyled component

checkbox.js

import React, { Component } from 'react'
import instyled, { flatKeyed } from 'instyled'
import cascade from 'cascade'

const CheckboxContainer = instyled(flatKeyed(cascade({
  display: 'flex',
  width: 'fit-content',
  padding: 10,
  borderRadius: 7,
  background: 'gray',
  boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
  isChecked: {
    color: 'orange',
    isPressed: {
      boxShadow: 'none'
    }
  },
  isPressed: {
    boxShadow: 'none'
  },
  disabled: {
    background: 'rgba(0,0,0,0)'
  }
})))

export default class Checkbox extends Component {
  constructor () {
    super()
    this.state = { isDepressed: false }
  }

  press () {
    if (this.props.disabled) return

    this.setState({ isDepressed: true })
  }

  release () {
    if (this.props.disabled) return

    this.setState({ isDepressed: false })
  }

  click () {
    if (this.props.disabled) return

    if (this.props.onChange) {
      this.props.onChange(!this.props.value)
    } else if (this.props.onClick) {
      this.props.onClick()
    }
  }

  render () {
    const { children, onChange, value, ...etc } = this.props
    return (
      <CheckboxContainer {...etc}
        onMouseDown={() => this.press()}
        onMouseUp={() => this.release()}
        onClick={() => this.click()}
        isPressed={this.state.isDepressed}
        isChecked={value}>
        <input type='checkbox' readOnly checked={value} />
        {children}
      </CheckboxContainer>
    )
  }
}

Checkbox.propTypes = {
  children: React.PropTypes.node,
  disabled: React.PropTypes.bool,
  onClick: React.PropTypes.func,
  onChange: React.PropTypes.func,
  value: React.PropTypes.bool
}

some-component.js

import React, { Component } from 'react'
import CheckBox from './checkbox'

export default class Page extends Component {
  constructor () {
    super()
    this.state = { toggle: false }
  }

  doToggle () {
    this.setState({ toggle: !this.state.toggle })
  }

  render () {
    return (
      <div>
        <CheckBox
          mergeStyle={{ width: '25%' }}
          value={this.state.toggle}
          onClick={() => this.doToggle()}>
          Toggle Form
        </CheckBox>
      </div>
    )
  }
}