---
layout      : 'default'
css         : 'checkbox'

title       : 'Checkbox'
description : "A checkbox visually indicates the status of a user's selection"
type        : 'UI Module'
---
<script src="/javascript/checkbox.js"></script>

<%- @partial('header', { tabs: 'module' }) %>

<div class="main container">

  <div class="ui tab" data-tab="definition">

    <div class="peek">
      <div class="ui vertical pointing secondary menu">
        <a class="active item">Types</a>
        <a class="item">Variations</a>
      </div>
    </div>

    <h2 class="ui dividing header">Types</h2>

    <div class="example">
      <h4 class="ui header">Checkbox</h4>
      <p>A standard checkbox</p>
      <div class="ui checkbox">
        <input type="checkbox" name="fun" />
        <label>I enjoy having fun</label>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Slider</h4>
      <p>A checkbox can be formatted to show user selection as a slider</p>
      <div class="ui slider checkbox">
        <input type="checkbox" name="walk" />
        <label>Allow others to see when your dog is on a walk</label>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Toggle</h4>
      <p>A checkbox can be formatted to show user selection as a toggle</p>
      <div class="ui toggle checkbox">
        <input type="checkbox" name="pet" />
        <label>Allow other people to pet my dog</label>
      </div>
    </div>



    <div class="example">
      <h4 class="ui header">Radio Box</h4>
      <p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
      <div class="ui form">
        <div class="grouped inline fields">
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit" checked="checked" />
              <label>Apples</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit" />
              <label>Oranges</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit" />
              <label>Pears</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit" />
              <label>Grapefruit</label>
            </div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Variations</h2>

    <div class="example">
      <h4 class="ui header">Size</h4>
      <p>A checkbox can be a different size.</p>
      <div class="ui large checkbox">
        <input type="checkbox" />
        <label>Add a pro membership</label>
      </div>
    </div>
    <div class="another example">
      <div class="ui huge checkbox">
        <input type="checkbox" />
        <label>Signup for our mailing list</label>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">

    <h3 class="ui header">Check Box</h3>
    <p>A checkbox can be initialized with javascript for increase programmatic control</p>

    <div class="code">
    $('.ui.checkbox')
      .checkbox()
    ;
    </div>
    <div class="code" data-type="html">
      <div class="ui checkbox">
        <input type="checkbox">
        <label>Poodle</label>
      </div>
    </div>

    <h3 class="ui header">Check Box without Javascript</h3>
    <p>A checkbox can also be used without using javascript by matching the <code>id</code> attribute of the input field to the <code>for</code> attribute of the accompanying label</p>
    <div class="code" data-type="html">
      <div class="ui checkbox">
        <input type="checkbox" id="unique-id" />
        <label for="unique-id">Poodle</label>
      </div>
    </div>

    <h2 class="ui dividing header">Behavior</h2>
    <table class="ui definition celled table segment">
      <tr>
        <td>enable</td>
        <td>A checkbox can change to show a user has selected it</td>
      </tr>
      <tr>
        <td>disable</td>
        <td>A checkbox can change to show a user has deselected it</td>
      </tr>
      <tr>
        <td>toggle</td>
        <td>A checkbox can toggle its current selection state</td>
      </tr>
    </table>


  </div>

  <div class="ui tab" data-tab="examples">

    <h2>Examples</h2>

    <div class="example">
      <p>Example of using checkbox states to alter multiple checkboxes</p>
      <div class="evaluated code">
      $('.enable.button')
        .on('click', function() {
          $(this)
            .nextAll('.checkbox')
              .checkbox('enable')
          ;
        })
      ;
      $('.disable.button')
        .on('click', function() {
          $(this)
            .nextAll('.checkbox')
              .checkbox('disable')
          ;
        })
      ;
      $('.toggle.button')
        .on('click', function() {
          $(this)
            .nextAll('.checkbox')
              .checkbox('toggle')
          ;
        })
      ;
      </div>
      <div class="ui toggle button">Toggle</div>
      <div class="ui positive enable button">Enable</div>
      <div class="ui negative disable button">Disable</div>
      <br><br>
      <div class="ui slider checkbox">
        <input type="checkbox" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" checked="checked" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" checked="checked" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" checked="checked" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" checked="checked" />
        <div class="box"></div>
      </div>
      <div class="ui slider checkbox">
        <input type="checkbox" />
        <div class="box"></div>
      </div>
    </div>
  </div>

  <div class="ui tab" data-tab="settings">

    <h3 class="ui header">
      Checkbox Settings
      <div class="sub header">Checkbox settings modify its behavior</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>required</td>
          <td>auto</td>
          <td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td>
        </tr>
        <tr>
          <td>context</td>
          <td>false</td>
          <td>A selector or jQuery object to use as a delegated event context</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">
      Callbacks
      <div class="sub header">Callback settings specify a function to occur after a specific behavior.</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <th class="four wide">Setting</th>
        <th>Context</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>onChange</td>
          <td>Checkbox</td>
          <td>Callback after a checkbox is either disabled or enabled.</td>
        </tr>
        <tr>
          <td>onEnable</td>
          <td>Checkbox</td>
          <td>Callback after a checkbox is enabled.</td>
        </tr>
        <tr>
          <td>onDisable</td>
          <td>Checkbox</td>
          <td>Callback after a checkbox is disabled.</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>checkbox</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>selector</td>
          <td colspan="2">
            <div class="code">
      selector : {
        input  : 'input',
        label  : 'label'
      }
            </div>
          </td>
        </tr>
        <tr>
          <td>className</td>
          <td colspan="2">
            <div class="code">
      className : {
        radio  : 'radio'
      }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
</body>

</html>