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

title  : 'Checkbox'
type   : 'UI Module'
---
<script src="/javascript/checkbox.js"></script>

<div class="segment">
  <div class="container">
    <h1 class="ui dividing header">Checkbox</h1>
    <p>A checkbox is a <a href="/module.html">ui module</a> which indicates a user's selection of a choice.</p>
  </div>
</div>
<div class="main container">
  
  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Standard</a>
      <a class="item">Variations</a>
      <a class="item">Behavior</a>
      <a class="item">Examples</a>
      <a class="item">Usage</a>
    </div>
  </div>
  
  <h2 class="ui dividing header">Standard</h2>

  <div class="example">
    <h4 class="ui header">Check Box</h4>
    <p>A standard checkbox</p>
    <div class="ui checkbox">
      <input type="checkbox" />
      <div class="box"></div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Static Check Box</h4>
    <p>A checkbox can function without javascript</p>
    <div class="ui checkbox">
      <input type="checkbox" id="unique-id" />
      <label class="box" for="unique-id"></label>
    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Form Checkbox</h4>
    <p>A checkbox can be found inside a form</p>
    <div class="ui form segment">
      <div class="field">
        <label>Name</label>
        <input placeholder="Name" type="text">
      </div>
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" />
          <div class="box"></div>
        </div>
        <label>Accept all our evil terms and conditions</label>
      </div>
      <div class="ui teal button">Submit</div>
    </div>
  </div>
  
  <h2 class="ui dividing header">Variations</h2>
  
  <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="inline field">
        <div class="ui radio checkbox">
          <input type="radio" name="fruit" />
          <label></label>
        </div>
        <label> Apples</label> 
      </div>
      <div class="inline field">
        <div class="ui radio checkbox">
          <input type="radio" name="fruit" />
          <label></label>
        </div>
        <label> Oranges</label> 
      </div>
      <div class="inline field">
        <div class="ui radio checkbox">
          <input type="radio" name="fruit" />
          <label></label>
        </div>
        <label> Pears</label> 
      </div>
      <div class="inline field">
        <div class="ui radio checkbox">
          <input type="radio" name="fruit" />
          <label></label>
        </div>
        <label> Grapefruit</label> 
      </div>
    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>A checkbox can be a different size.</p>
    <h4 class="ui red block header">
      <div class="ui large checkbox">
        <input type="checkbox" />
        <label></label>
      </div>
      Add a pro membership
    </h4>
    <br><br>
    <h3 class="ui blue block header">
      <div class="ui huge checkbox">
        <input type="checkbox" />
        <label></label>
      </div>
      Signup for our mailing list
    </h3>
  </div>
  
  <h2 class="ui dividing header">Behavior</h2>

  <div class="example">
    <p>A checkbox can change to show a user has selected it</p>
    <div class="ignore code">
    $('.ui.checkbox')
      .checkbox('enable')
    ;
    </div>
  </div>
  <div class="example">
    <p>A checkbox can change to show a user has not selected it</p>
    <div class="ignore code">
    $('.ui.checkbox')
      .checkbox('disable')
    ;
    </div>
  </div>
  <div class="example">
    <p>A checkbox can toggle between states</p>
    <div class="ignore code">
    $('.ui.checkbox')
      .checkbox('toggle')
    ;
    </div>
  </div>

  <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)
          .parent()
          .nextAll('.checkbox')
            .checkbox('enable')
        ;
      })
    ;
    $('.disable.button')
      .on('click', function() {
        $(this)
          .parent()
          .nextAll('.checkbox')
            .checkbox('disable')
        ;
      })
    ;
    $('.toggle.button')
      .on('click', function() {
        $(this)
          .parent()
          .nextAll('.checkbox')
            .checkbox('toggle')
        ;
      })
    ;
    </div>
    <div class="ui buttons">
      <div class="ui enable button">Enable</div>
      <div class="ui disable button">Disable</div>
      <div class="ui toggle button">Toggle</div>
    </div>
    <br><br>
    <div class="ui checkbox">
      <input type="checkbox" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" checked="checked" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" checked="checked" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" checked="checked" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" checked="checked" />
      <div class="box"></div>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" />
      <div class="box"></div>
    </div>
  </div>


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

  <h3>Initializing</h3>
  <h3 class="ui header">Initializing a check box</h3>
  <div class="code">
    $('.ui.checkbox')
      .checkbox()
    ;
  </div>
  
  <h3 class="ui header">Settings</h3>
  <table class="ui red table segment">
    <thead>
      <th colspan="3">Checkbox Settings</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>
  
  <table class="ui teal table segment">
    <thead>
      <th colspan="3">Callbacks</th>
    </thead>
    <tbody>
      <tr>
        <td>onChange</td>
        <td>None</td>
        <td>Callback after a checkbox is either disabled or enabled.</td>
      </tr>
      <tr>
        <td>onEnable</td>
        <td>None</td>
        <td>Callback after a checkbox is enabled.</td>
      </tr>
      <tr>
        <td>onDisable</td>
        <td>None</td>
        <td>Callback after a checkbox is disabled.</td>
      </tr>
    </tbody>
  </table>
  
  <table class="ui blue table segment">
    <thead>
      <th colspan="3">UI Module Settings</th>
    </thead>
    <tbody>
      <tr>
        <td>moduleName</td>
        <td>Checkbox</td>
        <td>Name used in debug logs</td>
      </tr>
      <tr>
        <td>debug</td>
        <td>True</td>
        <td>Provides standard debug output to console</td>
      </tr>
      <tr>
        <td>performance</td>
        <td>False</td>
        <td>Provides standard debug output to console</td>
      </tr>
      <tr>
        <td>verbose</td>
        <td>False</td>
        <td>Provides ancillary debug output to console</td>
      </tr>
      <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>errors</td>
        <td colspan="2">
          <div class="code">
    errors : {
      method : 'The method you called is not defined.'
    }
          </div>
        </td>
      </tr>
    </tbody>
  </table>

</div>
</body>

</html>