causeway-standard-theme/causeway/docs/components/form-fields/checkbox-input.html

<div>
  <a id="forms-checkbox"></a>
  <header class="content-header">
    <h1 class="title">
      Checkbox
    </h1>
  </header>

  <p>
    Checkbox controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <code>&lt;input&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code> and <code>&lt;label&gt;</code>.
  </p>
  <div class="table-wrapper">
    <table class="table table-striped">
    <thead>
      <tr>
        <th>
          Style
        </th>
        <th>
          Attribute
        </th>
        <th>
          Value
        </th>
        <th>
           Example
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4">
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          Standard
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group checkbox">
                <input type="checkbox" class="form-control" id="checkbox-field1a" name="checkbox_field1a" value="">
                <label for="checkbox-field1a">
                  <span class="checkbox-icon"></span>
                  Checkbox
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Standard - Label first
        </td>
        <td>
          class
          <br/><br/>
          label-first
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <div class="control-input checkbox label-first">
                  <input type="checkbox" class="form-control" id="checkbox-field2a" name="checkbox_field2a" value="">
                  <label for="checkbox-field2a">
                    <span class="checkbox-icon"></span>
                    Checkbox
                  </label>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Standard - Left aligned
        </td>
        <td>
          class
          <br/><br/>
          left-aligned
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <div class="control-input checkbox left-aligned">
                  <input type="checkbox" class="form-control" id="checkbox-field3b" name="checkbox_field3a" value="">
                  <label for="checkbox-field3b">
                    <span class="checkbox-icon"></span>
                    Checkbox
                  </label>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Standard - No label
        </td>
        <td>
          class
          <br/><br/>
          no-label
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <div class="control-input  checkbox no-label">
                  <input type="checkbox" class="form-control" id="checkbox-field3a" name="checkbox_field3a" value="">
                  <label for="checkbox-field3a">
                    <span class="checkbox-icon"></span>
                    Checkbox
                  </label>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled
        </td>
        <td>
          class
          <br/><br/>
          disabled
        </td>
        <td>
          disabled
          <br/><br/>
          disabled
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <div class="control-input checkbox disabled">
                  <input type="checkbox" disabled="disabled" class="form-control" id="checkbox-field1c" name="checkbox_field1c" value="">
                  <label for="checkbox-field1c" class="disabled">
                    <span class="checkbox-icon"></span>
                    Checkbox
                  </label>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Invalid
        </td>
        <td>
          class
        </td>
        <td>
          invalid
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group checkbox invalid">
                <input type="checkbox" class="form-control" id="checkbox-field1d" name="checkbox_field1d" value="">
                <label for="checkbox-field1d">
                  <span class="checkbox-icon"></span>
                  Checkbox
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled and Checked
        </td>
        <td>
          class
        </td>
        <td>
          disabled checked
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <div class="control-input checkbox disabled">
                  <input type="checkbox" id="checkbox-field1e" name="checkbox_field1e" value="" disabled="disabled" checked="checked">
                  <label for="checkbox-field1e" class="disabled checked">
                    <span class="checkbox-icon"></span>
                    Checkbox disabled and checked
                  </label>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <pre>
    <code>
      &lt;div class=&quot;form-group checkbox&quot;&gt;
        &lt;input type=&quot;checkbox&quot; class=&quot;form-control&quot; id=&quot;&lt;!-- Input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Input control name goes here --&gt;&quot; value=&quot;&quot;&gt;
        &lt;label for=&quot;&lt;!-- Input control ID goes here --&gt;&quot;&gt;
          &lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;
          &lt;!-- Label text goes here --&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    </code>
  </pre>
</div>