Link copied!

Checkbox Examples

<div class="e-field">
  <e-checkbox data-id="checkbox01" value="value01" name="checkbox01" checked></e-checkbox>
</div>
<div class="e-field">
  <e-checkbox data-id="checkbox01" value="value01" label="Checkbox Label" name="checkbox01"></e-checkbox>
</div>
<div class="e-field">
  <e-checkbox data-id="checkbox01" value="value01" label="Checkbox Label" name="checkbox01" disabled></e-checkbox>
</div>
<div class="e-field">
  <e-checkbox data-id="checkbox01" value="value01" label="Checkbox Label" name="checkbox01" indeterminate></e-checkbox>
</div>
<div class="e-field">
  <e-checkbox label="Checkbox Label" helper="Tooltip text goes here"></e-checkbox>
</div>
<div class="e-field">
  <input class="e-checkbox" type="checkbox" id="chb0" checked>
  <label for="chb0">
    Checkbox Label
  </label>
</div>
<div class="e-field">
  <table class="e-table" data-e-version="2">
    <tbody>
      <tr>
        <td class="e-table__col-auto">
          <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="chb_ochb1">
          <label for="chb_ochb1"></label>
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </td>
      </tr>
      <tr>
        <td>
          <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="chb_ochb2">
          <label for="chb_ochb2"></label>
        </td>
        <td>
          Nam dictum augue vitae est efficitur sed interdum eros rhoncus
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="e-field">
  <input class="e-checkbox" type="checkbox" id="chb5" checked disabled>
  <label for="chb5">
    Checkbox Label
  </label>
</div>
<div class="e-field">
  <input class="e-checkbox" type="checkbox" id="chb1">
  <label for="chb1">
    Checkbox Label
  </label>
</div>
Copy Javascript
Copied to clipboard! 
document.getElementById('chb1').indeterminate = true;
<div class="e-field">
  <input class="e-checkbox e-input-error" type="checkbox" id="chb2">
  <label for="chb2">
    Checkbox Label
  </label>
</div>
<e-dropdown data-markup-content="&lt;input id=&quot;chb_dropdown&quot; type=&quot;checkbox&quot; class=&quot;e-checkbox e-checkbox-onlycheckbox&quot; &gt;&lt;label for=&quot;chb_dropdown&quot;&gt;&lt;/label&gt;" data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-inner-class="e-dropdown__content-sticky">
  <div class="e-dropdown__content">
    <a class="e-dropdown__item">
      Select All
    </a>
    <a class="e-dropdown__item">
      Select None
    </a>
    <a class="e-dropdown__item">
      Select Tracked
    </a>
    <a class="e-dropdown__item">
      Select Untracked
    </a>
  </div>
</e-dropdown>
<div style="width: 200px">
  <label class="e-field__label">
    Checkbox Group Label
  </label>
  <input class="e-checkbox e-checkbox-block" type="checkbox" name="chb3.1" id="chb3.1" checked>
  <label for="chb3.1">
    Lorem ipsum dolor sit amet
  </label>
  <input class="e-checkbox e-checkbox-block" type="checkbox" name="chb3.2" id="chb3.2" checked>
  <label for="chb3.2">
    Consectetur adipisicing elit sed do eiusmod
  </label>
</div>
<div class="e-field" style="width: 400px">
  <input class="e-checkbox e-checkbox-right" type="checkbox" id="chb4" checked>
  <label for="chb4">
    Checkbox Label
  </label>
</div>