MultiSelect Checkbox in React

npm install selectly --save

const { Component, Children, PropTypes } = React
const { Select, Option, utils } = Selectly
const { getToggledOptions } = utils

class CheckboxOption extends Component {
  render() {
    const { value, isChecked, children } = this.props
    return (
      <Option className="react-select-option" value={value}>
        <input
          type="checkbox"
          className="react-select-option__checkbox"
          defaultValue={null}
          checked={isChecked}
        />
        <div className="react-select-option__label">
          {children}
        </div>
      </Option>
    )
  }
}

class CheckboxMultiSelect extends Component {
  constructor(props) {
    super(props)
    this.state = {
      defaultValue: 'Select a color',
      currentValues: []
    }
    this._handleChange = this._handleChange.bind(this)
  }

  _handleChange(value) {
    this.setState({
      currentValues: getToggledOptions(this.state.currentValues, value)
    })
  }

  render() {
    const { defaultValue, currentValues } = this.state

    return (
      <Select
        classPrefix="react-select"
        multiple
        onChange={this._handleChange}
      >
        <button className="react-select-trigger">
          { currentValues.length > 0
            ? currentValues.join(', ')
            : defaultValue
          }
        </button>
        <div className="react-select-menu">
          <ul className="react-select-options">
            <CheckboxOption value="php" isChecked={currentValues.indexOf('php') > -1}>
              PHP
            </CheckboxOption>
            <CheckboxOption value="react" isChecked={currentValues.indexOf('react') > -1}>
              React
            </CheckboxOption>
            <CheckboxOption value="wordpress" isChecked={currentValues.indexOf('wordpress') > -1}>
              WordPress
            </CheckboxOption>
          </ul>
        </div>
      </Select>
    )
  }
}

.react-select {
  display: inline-block;
  width: 100%;
  height: auto;
  position: relative;
}

.react-select-trigger {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 31px;
  padding: 6px 27px 6px 6px;
  font-size: 14px;
  text-align: left;
  border-radius: 3px;
  border: 1px solid #d3d4d4;
  outline: 0;
  cursor: pointer;
  position: relative;
  background: {
    color: #fff;
    image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21px" height="21px" viewBox="0 0 21 21"><polygon points="10.5,12 7,8.5 14,8.5"/></svg>');
    repeat: no-repeat;
    position: calc(100% - 5px) center;
  }

  &, &:active {
    color: black;
  }

  &.react-select-enabled {
  }

  &.react-select-target-attached-top {
    border-radius: 0 0 3px 3px;
  }

  &.react-select-target-attached-bottom {
    border-radius: 3px 3px 0 0;
  }

  // truncate children with ellipsis
  * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.react-select-trigger__option {
  user-select: none;

  & + & {
    margin-left: 6px;
  }

  .react-select-trigger--multiple & {
    padding: 0 3px;
    border-radius: 2px;
    background: #E6F9FF;
  }
}

.react-select-trigger__arrow {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.react-select-menu {
  max-height: 180px;
  padding: 3px 0;
  border: 1px solid #e1e1e1;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px 0 rgba(218, 221, 222, 0.35);
  background-color: white;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;

  .react-select-enabled & {
    pointer-events: auto;
  }

  .react-select-element-attached-top  & {
    margin-top: -1px;
    border-top: 0;
  }

  .react-select-element-attached-bottom  & {
    margin-top: 1px;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -2px 4px 0 rgba(218, 221, 222, 0.35);
  }
}

.react-select-header {
  display: flex;
  padding: 8px;
  border-bottom: 1px solid #F1F3F5;
  border-top: 1px solid #F1F3F5;
}

.react-select-btn {
  flex: 1;
}

.react-select-options {
  padding: 0;
  margin: 0;
  list-style: none;
}

.react-select-option {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 14px;
  text-indent: 4px;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;

  &:hover {
    background: #FBFBFB;
  }
}

.react-select-option__label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.react-select-optgroup {
  display: block;
  padding: 3px 0;
  cursor: default;
  border-top: 1px solid #F1F3F5;

  &:first-child {
    border: 0;
  }
}

.react-select-optgroup__title {
  display: block;
  padding: 8px 12px 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #909294;
  user-select: none;
}


// Pen Specific
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  padding: 24px;
}

#app {
  width: 300px;
  margin: 0 auto;
}