formstone/src/docs/checkbox.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<div class="demo_container">
  <div class="demo_example">
    <div class="fs-row">
      <div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
        <form action="#" method="GET" class="form demo_form">
          <fieldset class="form_fieldset">
            <input type="checkbox" value="1" id="checkbox-1" name="checkbox-1" checked>
            <label for="checkbox-1">One</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label for="checkbox-2">
              <input type="checkbox" value="2" id="checkbox-2" name="checkbox-2"> Two
            </label>
          </fieldset>
          <fieldset class="form_fieldset">
            <input type="checkbox" value="3" id="checkbox-3" name="checkbox-3" disabled>
            <label for="checkbox-3">Three</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label>
              <span>
                <input type="checkbox" value="4" id="checkbox-4" name="checkbox-4"> Four
              </span>
            </label>
          </fieldset>
        </form>
      </div>
      <div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
        <form action="#" method="GET" class="form demo_form">
          <fieldset class="form_fieldset">
            <input type="radio" value="1" id="radio-1" name="radio-group" checked>
            <label for="radio-1">One</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label for="radio-2">
              <input type="radio" value="2" id="radio-2" name="radio-group"> Two
            </label>
          </fieldset>
          <fieldset class="form_fieldset">
            <input type="radio" value="3" id="radio-3" name="radio-group" disabled>
            <label for="radio-3">Three</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label>
              <span>
                <input type="radio" value="4" id="radio-4" name="radio-group"> Four!
              </span>
            </label>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; id=&quot;checkbox&quot; name=&quot;checkbox&quot;&gt;
&lt;label for=&quot;checkbox&quot;&gt;Checkbox&lt;/label&gt;

&lt;input type=&quot;radio&quot; value=&quot;1&quot; id=&quot;radio&quot; name=&quot;radio&quot;&gt;
&lt;label for=&quot;radio&quot;&gt;Radio&lt;/label&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='checkbox'], input[type='radio']").checkbox();</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>Toggle</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="fs-row">
      <div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
        <form action="#" method="GET" class="form demo_form">
          <fieldset class="form_fieldset">
            <input type="checkbox" value="One" id="toggle-1" name="toggle-1" checked data-checkbox-options='{"toggle":true}'>
            <label for="toggle-1">One</label>
          </fieldset>
        </form>
      </div>
      <div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
        <form action="#" method="GET" class="form demo_form">
          <fieldset class="form_fieldset">
            <input type="checkbox" value="Two" id="toggle-2" name="toggle-2" disabled data-checkbox-options='{"toggle":true}'>
            <label for="toggle-2">Two</label>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; id=&quot;checkbox&quot; name=&quot;checkbox&quot;&gt;
&lt;label for=&quot;checkbox&quot;&gt;Checkbox&lt;/label&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='checkbox']").checkbox({
  toggle: true
});</code></pre>
  </div>
</div>

<h4>No Theme</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="fs-row">
      <div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
        <form action="#" method="GET" class="form demo_form">
          <fieldset class="form_fieldset">
            <input type="checkbox" value="1" id="checkbox-plain-1" name="checkbox-plain-1" checked data-checkbox-options='{"theme":""}'>
            <label for="checkbox-plain-1">One</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label for="checkbox-plain-2">
              <input type="checkbox" value="2" id="checkbox-plain-2" name="checkbox-plain-2" data-checkbox-options='{"theme":""}'> Two
            </label>
          </fieldset>
          <fieldset class="form_fieldset">
            <input type="checkbox" value="3" id="checkbox-plain-3" name="checkbox-plain-3" disabled data-checkbox-options='{"theme":""}'>
            <label for="checkbox-plain-3">Three</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label>
              <span>
                <input type="checkbox" value="4" id="checkbox-plain-4" name="checkbox-plain-4" data-checkbox-options='{"theme":""}'> Four
              </span>
            </label>
          </fieldset>
        </form>
      </div>
      <div class="fs-cell fs-sm-half fs-md-half fs-lg-third">
        <form action="#" method="GET" class="form demo_form">
          <fieldset class="form_fieldset">
            <input type="radio" value="1" id="radio-plain-1" name="radio-plain-group" checked data-checkbox-options='{"theme":""}'>
            <label for="radio-plain-1">One</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label for="radio-plain-2">
              <input type="radio" value="2" id="radio-plain-2" name="radio-plain-group" data-checkbox-options='{"theme":""}'> Two
            </label>
          </fieldset>
          <fieldset class="form_fieldset">
            <input type="radio" value="3" id="radio-plain-3" name="radio-plain-group" disabled data-checkbox-options='{"theme":""}'>
            <label for="radio-plain-3">Three</label>
          </fieldset>
          <fieldset class="form_fieldset">
            <label>
              <span>
                <input type="radio" value="4" id="radio-plain-4" name="radio-plain-group" data-checkbox-options='{"theme":""}'> Four!
              </span>
            </label>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; id=&quot;checkbox&quot; name=&quot;checkbox&quot;&gt;
&lt;label for=&quot;checkbox&quot;&gt;Checkbox&lt;/label&gt;

&lt;input type=&quot;radio&quot; value=&quot;1&quot; id=&quot;radio&quot; name=&quot;radio&quot;&gt;
&lt;label for=&quot;radio&quot;&gt;Radio&lt;/label&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='checkbox'], input[type='radio']").checkbox({
  theme: ""
});</code></pre>
  </div>
</div>