/* 
    <div class="checkbox-container" data-field="search">
        <input type="hidden" name="search">
        <span><i class='fa fa-fw'></i></span>
        <label>Allow more than one person to get it</label>
    </div>

or, for multi-select

    we need the extra hidden field with no value
    to ALWAYS be sent to the server
    even/especially if none are selected
    to remove them all

    <input type="hidden" name="search">

    by including the 'name' attribute, pre-selects the checkbox
    this library will add the fa-check class to the box on page load

    <div class="checkbox-container" data-field="search" data-multiple="true">
        <input type="hidden" value="1" name="search">
        <span><i class='fa fa-fw'></i></span>
        <label>1st search</label>
    </div>

    this one doesn't have the 'name' attribute, so is deselected

    <div class="checkbox-container" data-field="search" data-multiple="true">
        <input type="hidden" value="2">
        <span><i class='fa fa-fw'></i></span>
        <label>2nd search</label>
    </div>
*/

.checkbox-container { cursor: pointer; }

.checkbox-container label { cursor: pointer; margin: 0; }

.checkbox-container span {
    margin-right: .5rem!important;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    color: #868e96;
    background-color: transparent;
    background-image: none;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #ced4da;
}