Checkbox

HTML

JADE

Default

.e-checkbox

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb0" checked class="e-checkbox">
  <label for="chb0">
    Checkbox label
  </label>
</div>


                        <div class="e-field">
                          <input type="checkbox" id="chb0" checked class="e-checkbox">
                          <label for="chb0">Checkbox label</label>
                        </div>

Variations

Only checkbox

.e-checkbox-onlycheckbox

	Deserunt enim laboris eiusmod
	Nulla dolore sunt labore officia

<div class="e-field">
  <table data-e-version="2" class="e-table">
    <tbody>
      <tr>
        <td class="e-table__col-auto">
          <input type="checkbox" id="chb_ochb1" class="e-checkbox e-checkbox-onlycheckbox">
          <label for="chb_ochb1"></label>
        </td>
        <td>
          Nulla ad excepteur reprehenderit 
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="chb_ochb2" class="e-checkbox e-checkbox-onlycheckbox">
          <label for="chb_ochb2"></label>
        </td>
        <td>
          Cupidatat exercitation laboris sunt exercitation 
        </td>
      </tr>
    </tbody>
  </table>
</div>


                          <div class="e-field">
                            <table data-e-version="2" class="e-table">
                              <tbody>
                                <tr>
                                  <td class="e-table__col-auto">
                                    <input type="checkbox" id="chb_ochb1" class="e-checkbox e-checkbox-onlycheckbox">
                                    <label for="chb_ochb1"></label>
                                  </td>
                                  <td>Qui reprehenderit sint nisi 
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                    <input type="checkbox" id="chb_ochb2" class="e-checkbox e-checkbox-onlycheckbox">
                                    <label for="chb_ochb2"></label>
                                  </td>
                                  <td>Veniam est proident non eiusmod 
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>

Indeterminate

:indeterminate

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb1" class="e-checkbox">
  <label for="chb1">
    Checkbox label
  </label>
</div>
<script>
  document.getElementById('chb1').indeterminate = true;
</script>


                          <div class="e-field">
                            <input type="checkbox" id="chb1" class="e-checkbox">
                            <label for="chb1">Checkbox label</label>
                          </div>
                          <script>document.getElementById('chb1').indeterminate = true;</script>

Error

.e-input-error

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb2" class="e-checkbox e-input-error">
  <label for="chb2">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb2" class="e-checkbox e-input-error">
                            <label for="chb2">Checkbox label</label>
                          </div>

Block

.e-checkbox-block

Clear group label

Block label Block label Block label Block label Block label Block label
Normal label Normal label Normal label Normal label Normal label Normal

<div class="e-row">
  <div class="e-col-3">
    <div class="e-field">
      <label class="e-field__label">
        Clear group label
      </label>
      <ul class="e-list">
        <li class="e-list__item">
          <input type="checkbox" name="chb3.1" id="chb3.1" checked class="e-checkbox e-checkbox-block">
          <label for="chb3.1">
            Block label Block label Block label Block label Block label Block label
          </label>
        </li>
        <li class="e-list__item">
          <input type="checkbox" name="chb3.2" id="chb3.2" class="e-checkbox">
          <label for="chb3.2">
            Normal label Normal label Normal label Normal label Normal label Normal
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-field">
                                <label class="e-field__label">Clear group label</label>
                                <ul class="e-list">
                                  <li class="e-list__item">
                                    <input type="checkbox" name="chb3.1" id="chb3.1" checked class="e-checkbox e-checkbox-block">
                                    <label for="chb3.1">Block label Block label Block label Block label Block label Block label</label>
                                  </li>
                                  <li class="e-list__item">
                                    <input type="checkbox" name="chb3.2" id="chb3.2" class="e-checkbox">
                                    <label for="chb3.2">Normal label Normal label Normal label Normal label Normal label Normal</label>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>

Right

.e-checkbox-right

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb4" checked class="e-checkbox e-checkbox-right">
  <label for="chb4">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb4" checked class="e-checkbox e-checkbox-right">
                            <label for="chb4">Checkbox label</label>
                          </div>

Disabled

:disabled

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb5" checked disabled class="e-checkbox">
  <label for="chb5">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb5" checked disabled class="e-checkbox">
                            <label for="chb5">Checkbox label</label>
                          </div>

Service specific variations

Reporting color variations

opened

.e-checkbox-opened

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb61" checked class="e-checkbox e-checkbox-opened">
  <label for="chb61">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb61" checked class="e-checkbox e-checkbox-opened">
                            <label for="chb61">Checkbox label</label>
                          </div>

mobile_opened

.e-checkbox-mobile_opened

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb62" checked class="e-checkbox e-checkbox-mobile_opened">
  <label for="chb62">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb62" checked class="e-checkbox e-checkbox-mobile_opened">
                            <label for="chb62">Checkbox label</label>
                          </div>

desktop_opened

.e-checkbox-desktop_opened

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb63" checked class="e-checkbox e-checkbox-desktop_opened">
  <label for="chb63">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb63" checked class="e-checkbox e-checkbox-desktop_opened">
                            <label for="chb63">Checkbox label</label>
                          </div>

sent

.e-checkbox-sent

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb64" checked class="e-checkbox e-checkbox-sent">
  <label for="chb64">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb64" checked class="e-checkbox e-checkbox-sent">
                            <label for="chb64">Checkbox label</label>
                          </div>

clicked

.e-checkbox-clicked

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb65" checked class="e-checkbox e-checkbox-clicked">
  <label for="chb65">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb65" checked class="e-checkbox e-checkbox-clicked">
                            <label for="chb65">Checkbox label</label>
                          </div>

mobile_clicked

.e-checkbox-mobile_clicked

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb66" checked class="e-checkbox e-checkbox-mobile_clicked">
  <label for="chb66">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb66" checked class="e-checkbox e-checkbox-mobile_clicked">
                            <label for="chb66">Checkbox label</label>
                          </div>

desktop_clicked

.e-checkbox-desktop_clicked

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb67" checked class="e-checkbox e-checkbox-desktop_clicked">
  <label for="chb67">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb67" checked class="e-checkbox e-checkbox-desktop_clicked">
                            <label for="chb67">Checkbox label</label>
                          </div>

mobile_click_through

.e-checkbox-mobile_click_through

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb68" checked class="e-checkbox e-checkbox-mobile_click_through">
  <label for="chb68">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb68" checked class="e-checkbox e-checkbox-mobile_click_through">
                            <label for="chb68">Checkbox label</label>
                          </div>

delivered

.e-checkbox-delivered

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb69" checked class="e-checkbox e-checkbox-delivered">
  <label for="chb69">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb69" checked class="e-checkbox e-checkbox-delivered">
                            <label for="chb69">Checkbox label</label>
                          </div>

bounced

.e-checkbox-bounced

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb610" checked class="e-checkbox e-checkbox-bounced">
  <label for="chb610">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb610" checked class="e-checkbox e-checkbox-bounced">
                            <label for="chb610">Checkbox label</label>
                          </div>

purchased

.e-checkbox-purchased

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb611" checked class="e-checkbox e-checkbox-purchased">
  <label for="chb611">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb611" checked class="e-checkbox e-checkbox-purchased">
                            <label for="chb611">Checkbox label</label>
                          </div>

unsubscribed

.e-checkbox-unsubscribed

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb612" checked class="e-checkbox e-checkbox-unsubscribed">
  <label for="chb612">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb612" checked class="e-checkbox e-checkbox-unsubscribed">
                            <label for="chb612">Checkbox label</label>
                          </div>

complained

.e-checkbox-complained

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb613" checked class="e-checkbox e-checkbox-complained">
  <label for="chb613">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb613" checked class="e-checkbox e-checkbox-complained">
                            <label for="chb613">Checkbox label</label>
                          </div>

optin_users

.e-checkbox-optin_users

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb614" checked class="e-checkbox e-checkbox-optin_users">
  <label for="chb614">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb614" checked class="e-checkbox e-checkbox-optin_users">
                            <label for="chb614">Checkbox label</label>
                          </div>

Socialads color variations

impressions

.e-checkbox-impressions

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb71" checked class="e-checkbox e-checkbox-impressions">
  <label for="chb71">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb71" checked class="e-checkbox e-checkbox-impressions">
                            <label for="chb71">Checkbox label</label>
                          </div>

socialreach

.e-checkbox-socialreach

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb72" checked class="e-checkbox e-checkbox-socialreach">
  <label for="chb72">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb72" checked class="e-checkbox e-checkbox-socialreach">
                            <label for="chb72">Checkbox label</label>
                          </div>

reach

.e-checkbox-reach

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb73" checked class="e-checkbox e-checkbox-reach">
  <label for="chb73">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb73" checked class="e-checkbox e-checkbox-reach">
                            <label for="chb73">Checkbox label</label>
                          </div>

likes

.e-checkbox-likes

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb74" checked class="e-checkbox e-checkbox-likes">
  <label for="chb74">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb74" checked class="e-checkbox e-checkbox-likes">
                            <label for="chb74">Checkbox label</label>
                          </div>

clicks

.e-checkbox-clicks

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb75" checked class="e-checkbox e-checkbox-clicks">
  <label for="chb75">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb75" checked class="e-checkbox e-checkbox-clicks">
                            <label for="chb75">Checkbox label</label>
                          </div>

pageclick

.e-checkbox-pageclick

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb76" checked class="e-checkbox e-checkbox-pageclick">
  <label for="chb76">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb76" checked class="e-checkbox e-checkbox-pageclick">
                            <label for="chb76">Checkbox label</label>
                          </div>

cpc

.e-checkbox-cpc

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb77" checked class="e-checkbox e-checkbox-cpc">
  <label for="chb77">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb77" checked class="e-checkbox e-checkbox-cpc">
                            <label for="chb77">Checkbox label</label>
                          </div>

frequency

.e-checkbox-frequency

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb78" checked class="e-checkbox e-checkbox-frequency">
  <label for="chb78">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb78" checked class="e-checkbox e-checkbox-frequency">
                            <label for="chb78">Checkbox label</label>
                          </div>

comments

.e-checkbox-comments

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb79" checked class="e-checkbox e-checkbox-comments">
  <label for="chb79">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb79" checked class="e-checkbox e-checkbox-comments">
                            <label for="chb79">Checkbox label</label>
                          </div>

conversions

.e-checkbox-conversions

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb710" checked class="e-checkbox e-checkbox-conversions">
  <label for="chb710">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb710" checked class="e-checkbox e-checkbox-conversions">
                            <label for="chb710">Checkbox label</label>
                          </div>

spent

.e-checkbox-spent

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb711" checked class="e-checkbox e-checkbox-spent">
  <label for="chb711">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb711" checked class="e-checkbox e-checkbox-spent">
                            <label for="chb711">Checkbox label</label>
                          </div>

revenue

.e-checkbox-revenue

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb712" checked class="e-checkbox e-checkbox-revenue">
  <label for="chb712">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb712" checked class="e-checkbox e-checkbox-revenue">
                            <label for="chb712">Checkbox label</label>
                          </div>

cpm

.e-checkbox-cpm

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb713" checked class="e-checkbox e-checkbox-cpm">
  <label for="chb713">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb713" checked class="e-checkbox e-checkbox-cpm">
                            <label for="chb713">Checkbox label</label>
                          </div>

costperconversion

.e-checkbox-costperconversion

Checkbox label

<div class="e-field">
  <input type="checkbox" id="chb714" checked class="e-checkbox e-checkbox-costperconversion">
  <label for="chb714">
    Checkbox label
  </label>
</div>


                          <div class="e-field">
                            <input type="checkbox" id="chb714" checked class="e-checkbox e-checkbox-costperconversion">
                            <label for="chb714">Checkbox label</label>
                          </div>

Related components

Switch Radio Button radio

Last update

Message	feat(components): use stylelint rules
Date:	()
Committer:	rudywaltz

Component history

Checkbox

Default .e-checkbox

Variations

Only checkbox .e-checkbox-onlycheckbox

Indeterminate :indeterminate

Error .e-input-error

Block .e-checkbox-block

Right .e-checkbox-right

Disabled :disabled

Service specific variations

Reporting color variations

opened .e-checkbox-opened

mobile_opened .e-checkbox-mobile_opened

desktop_opened .e-checkbox-desktop_opened

sent .e-checkbox-sent

clicked .e-checkbox-clicked

mobile_clicked .e-checkbox-mobile_clicked

desktop_clicked .e-checkbox-desktop_clicked

mobile_click_through .e-checkbox-mobile_click_through

delivered .e-checkbox-delivered

bounced .e-checkbox-bounced

purchased .e-checkbox-purchased

unsubscribed .e-checkbox-unsubscribed

complained .e-checkbox-complained

optin_users .e-checkbox-optin_users

Socialads color variations

impressions .e-checkbox-impressions

socialreach .e-checkbox-socialreach

reach .e-checkbox-reach

likes .e-checkbox-likes

clicks .e-checkbox-clicks

pageclick .e-checkbox-pageclick

cpc .e-checkbox-cpc

frequency .e-checkbox-frequency

comments .e-checkbox-comments

conversions .e-checkbox-conversions

spent .e-checkbox-spent

revenue .e-checkbox-revenue

cpm .e-checkbox-cpm

costperconversion .e-checkbox-costperconversion

Related components

Last update

Default

.e-checkbox

Only checkbox

.e-checkbox-onlycheckbox

Indeterminate

:indeterminate

Error

.e-input-error

Block

.e-checkbox-block

Right

.e-checkbox-right

Disabled

:disabled

opened

.e-checkbox-opened

mobile_opened

.e-checkbox-mobile_opened

desktop_opened

.e-checkbox-desktop_opened

sent

.e-checkbox-sent

clicked

.e-checkbox-clicked

mobile_clicked

.e-checkbox-mobile_clicked

desktop_clicked

.e-checkbox-desktop_clicked

mobile_click_through

.e-checkbox-mobile_click_through

delivered

.e-checkbox-delivered

bounced

.e-checkbox-bounced

purchased

.e-checkbox-purchased

unsubscribed

.e-checkbox-unsubscribed

complained

.e-checkbox-complained

optin_users

.e-checkbox-optin_users

impressions

.e-checkbox-impressions

socialreach

.e-checkbox-socialreach

reach

.e-checkbox-reach

likes

.e-checkbox-likes

clicks

.e-checkbox-clicks

pageclick

.e-checkbox-pageclick

cpc

.e-checkbox-cpc

frequency

.e-checkbox-frequency

comments

.e-checkbox-comments

conversions

.e-checkbox-conversions

spent

.e-checkbox-spent

revenue

.e-checkbox-revenue

cpm

.e-checkbox-cpm

costperconversion

.e-checkbox-costperconversion