checkbox-component.css

.Checkbox input {
 width: 0;
 height: 0;
 opacity: 0;
}
.Checkbox input + label {
 display: block;
 width: 1rem;
 height: 1rem;
 background: grey;
}
.Checkbox input:checked + label {
 background: black;
}

checkbox-component.js

import {span, label, input} from '@cycle/DOM'

function Checkbox (sources) {
  const id = sources.random.uuid()
  
  return {
    vNode: (selector = '', attributes = {}) => {
      xs.of(
        span(`.Checkbox${selector}`, {}, [
          input(`#${id}${selector}`, {...attributes, attrs: {...(attributes.attrs || {}), type: 'checkbox'}}),
          label({attrs: {for: id}),
        ])
      )
    }
  }
}