JSFiddle - React, Tailwind, and code Playground

HTML

<p>
   <input type='checkbox' name='thing' value='valuable1' id="thing1" data-bind="checked: chk"/><label for="thing1"></label><label for="thing1">Visible label 1</label>
    
   <input type='checkbox' name='thing2' value='valuable2' id="thing2" data-bind="checked: chk"/><label for="thing2"></label>
    <label for="thing2">Visible label 2</label>
    <div data-bind="html: chk"></div>

CSS

input[type=checkbox] {
    display:none;
  }
 
  input[type=checkbox] + label
   {
       background: #999;
       height: 16px;
       width: 16px;
       display:inline-block;
       padding: 0 0 0 0px;
   }
   
   input[type=checkbox]:checked + label
    {
        background: #0080FF;
        height: 16px;
        width: 16px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

JavaScript

var ViewModel = function() {
    this.chk = ko.observableArray();
};
ko.applyBindings(new ViewModel());