Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Checkbox

Use Checkboxes when a list of options is given and the user may select any number of choices - zero, one, or several. A Checkbox can also be stand-alone. Use it as a single option that the user can select or leave unselected.

Default

Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox

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

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

Variations

Only checkbox
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-onlycheckbox

<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>
          Nisi quis duis esse 
        </td>
      </tr>
      <tr>
        <td>
          <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="chb_ochb2">
          <label for="chb_ochb2"></label>
        </td>
        <td>
          Deserunt tempor proident nulla velit 
        </td>
      </tr>
    </tbody>
  </table>
</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>Dolor elit non laboris </td></tr><tr><td><input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="chb_ochb2"><label for="chb_ochb2"></label></td><td>Et ex labore reprehenderit reprehenderit </td></tr></tbody></table></div>
Aute consequat nulla fugiat
Laboris proident aliquip ad non

Indeterminate
Copy Pug
Copy HTML
Show code
Hide code
:indeterminate

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

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

Error
Copy Pug
Copy HTML
Show code
Hide code
.e-input-error

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

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

Dropdown
Copy Pug
Copy HTML
Show code
Hide code

<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>

<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>
Select allSelect noneSelect trackedSelect untracked

Block
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-block

<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 class="e-checkbox e-checkbox-block" type="checkbox" name="chb3.1" id="chb3.1" checked>
          <label for="chb3.1">
            Block label Block label Block label Block label Block label Block label
          </label>
        </li>
        <li class="e-list__item">
          <input class="e-checkbox" type="checkbox" name="chb3.2" id="chb3.2">
          <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 class="e-checkbox e-checkbox-block" type="checkbox" name="chb3.1" id="chb3.1" checked><label for="chb3.1">Block label Block label Block label Block label Block label Block label</label></li><li class="e-list__item"><input class="e-checkbox" type="checkbox" name="chb3.2" id="chb3.2"><label for="chb3.2">Normal label Normal label Normal label Normal label Normal label Normal</label></li></ul></div></div></div>

Right
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-right

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

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

Disabled
Copy Pug
Copy HTML
Show code
Hide code
:disabled

<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="chb5" checked disabled><label for="chb5">Checkbox label</label></div>

Service specific variations

Reporting color variations

opened
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-opened

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-opened" type="checkbox" id="chb61">
  <label for="chb61">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-opened e-checkbox-nocolor_empty" type="checkbox" id="chb6a1">
  <label for="chb6a1">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-opened" type="checkbox" id="chb61"><label for="chb61">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-opened e-checkbox-nocolor_empty" type="checkbox" id="chb6a1"><label for="chb6a1">No color checkbox label</label></div>

mobile_opened
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-mobile_opened

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-mobile_opened" type="checkbox" id="chb62">
  <label for="chb62">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-mobile_opened e-checkbox-nocolor_empty" type="checkbox" id="chb6a2">
  <label for="chb6a2">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-mobile_opened" type="checkbox" id="chb62"><label for="chb62">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-mobile_opened e-checkbox-nocolor_empty" type="checkbox" id="chb6a2"><label for="chb6a2">No color checkbox label</label></div>

desktop_opened
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-desktop_opened

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-desktop_opened" type="checkbox" id="chb63">
  <label for="chb63">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-desktop_opened e-checkbox-nocolor_empty" type="checkbox" id="chb6a3">
  <label for="chb6a3">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-desktop_opened" type="checkbox" id="chb63"><label for="chb63">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-desktop_opened e-checkbox-nocolor_empty" type="checkbox" id="chb6a3"><label for="chb6a3">No color checkbox label</label></div>

sent
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-sent

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-sent" type="checkbox" id="chb64">
  <label for="chb64">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-sent e-checkbox-nocolor_empty" type="checkbox" id="chb6a4">
  <label for="chb6a4">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-sent" type="checkbox" id="chb64"><label for="chb64">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-sent e-checkbox-nocolor_empty" type="checkbox" id="chb6a4"><label for="chb6a4">No color checkbox label</label></div>

clicked
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-clicked

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-clicked" type="checkbox" id="chb65">
  <label for="chb65">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-clicked e-checkbox-nocolor_empty" type="checkbox" id="chb6a5">
  <label for="chb6a5">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-clicked" type="checkbox" id="chb65"><label for="chb65">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-clicked e-checkbox-nocolor_empty" type="checkbox" id="chb6a5"><label for="chb6a5">No color checkbox label</label></div>

mobile_clicked
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-mobile_clicked

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-mobile_clicked" type="checkbox" id="chb66">
  <label for="chb66">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-mobile_clicked e-checkbox-nocolor_empty" type="checkbox" id="chb6a6">
  <label for="chb6a6">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-mobile_clicked" type="checkbox" id="chb66"><label for="chb66">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-mobile_clicked e-checkbox-nocolor_empty" type="checkbox" id="chb6a6"><label for="chb6a6">No color checkbox label</label></div>

desktop_clicked
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-desktop_clicked

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-desktop_clicked" type="checkbox" id="chb67">
  <label for="chb67">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-desktop_clicked e-checkbox-nocolor_empty" type="checkbox" id="chb6a7">
  <label for="chb6a7">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-desktop_clicked" type="checkbox" id="chb67"><label for="chb67">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-desktop_clicked e-checkbox-nocolor_empty" type="checkbox" id="chb6a7"><label for="chb6a7">No color checkbox label</label></div>

mobile_click_through
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-mobile_click_through

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-mobile_click_through" type="checkbox" id="chb68">
  <label for="chb68">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-mobile_click_through e-checkbox-nocolor_empty" type="checkbox" id="chb6a8">
  <label for="chb6a8">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-mobile_click_through" type="checkbox" id="chb68"><label for="chb68">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-mobile_click_through e-checkbox-nocolor_empty" type="checkbox" id="chb6a8"><label for="chb6a8">No color checkbox label</label></div>

delivered
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-delivered

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-delivered" type="checkbox" id="chb69">
  <label for="chb69">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-delivered e-checkbox-nocolor_empty" type="checkbox" id="chb6a9">
  <label for="chb6a9">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-delivered" type="checkbox" id="chb69"><label for="chb69">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-delivered e-checkbox-nocolor_empty" type="checkbox" id="chb6a9"><label for="chb6a9">No color checkbox label</label></div>

bounced
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-bounced

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-bounced" type="checkbox" id="chb610">
  <label for="chb610">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-bounced e-checkbox-nocolor_empty" type="checkbox" id="chb6a10">
  <label for="chb6a10">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-bounced" type="checkbox" id="chb610"><label for="chb610">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-bounced e-checkbox-nocolor_empty" type="checkbox" id="chb6a10"><label for="chb6a10">No color checkbox label</label></div>

purchased
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-purchased

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-purchased" type="checkbox" id="chb611">
  <label for="chb611">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-purchased e-checkbox-nocolor_empty" type="checkbox" id="chb6a11">
  <label for="chb6a11">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-purchased" type="checkbox" id="chb611"><label for="chb611">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-purchased e-checkbox-nocolor_empty" type="checkbox" id="chb6a11"><label for="chb6a11">No color checkbox label</label></div>

unsubscribed
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-unsubscribed

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-unsubscribed" type="checkbox" id="chb612">
  <label for="chb612">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-unsubscribed e-checkbox-nocolor_empty" type="checkbox" id="chb6a12">
  <label for="chb6a12">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-unsubscribed" type="checkbox" id="chb612"><label for="chb612">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-unsubscribed e-checkbox-nocolor_empty" type="checkbox" id="chb6a12"><label for="chb6a12">No color checkbox label</label></div>

complained
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-complained

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-complained" type="checkbox" id="chb613">
  <label for="chb613">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-complained e-checkbox-nocolor_empty" type="checkbox" id="chb6a13">
  <label for="chb6a13">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-complained" type="checkbox" id="chb613"><label for="chb613">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-complained e-checkbox-nocolor_empty" type="checkbox" id="chb6a13"><label for="chb6a13">No color checkbox label</label></div>

optin_users
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-optin_users

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-optin_users" type="checkbox" id="chb614">
  <label for="chb614">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-optin_users e-checkbox-nocolor_empty" type="checkbox" id="chb6a14">
  <label for="chb6a14">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-optin_users" type="checkbox" id="chb614"><label for="chb614">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-optin_users e-checkbox-nocolor_empty" type="checkbox" id="chb6a14"><label for="chb6a14">No color checkbox label</label></div>

Socialads color variations

impressions
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-impressions

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-impressions" type="checkbox" id="chb71">
  <label for="chb71">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-impressions e-checkbox-nocolor_empty" type="checkbox" id="chb7a1">
  <label for="chb7a1">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-impressions" type="checkbox" id="chb71"><label for="chb71">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-impressions e-checkbox-nocolor_empty" type="checkbox" id="chb7a1"><label for="chb7a1">No color checkbox label</label></div>

socialreach
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-socialreach

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-socialreach" type="checkbox" id="chb72">
  <label for="chb72">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-socialreach e-checkbox-nocolor_empty" type="checkbox" id="chb7a2">
  <label for="chb7a2">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-socialreach" type="checkbox" id="chb72"><label for="chb72">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-socialreach e-checkbox-nocolor_empty" type="checkbox" id="chb7a2"><label for="chb7a2">No color checkbox label</label></div>

reach
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-reach

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-reach" type="checkbox" id="chb73">
  <label for="chb73">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-reach e-checkbox-nocolor_empty" type="checkbox" id="chb7a3">
  <label for="chb7a3">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-reach" type="checkbox" id="chb73"><label for="chb73">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-reach e-checkbox-nocolor_empty" type="checkbox" id="chb7a3"><label for="chb7a3">No color checkbox label</label></div>

likes
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-likes

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-likes" type="checkbox" id="chb74">
  <label for="chb74">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-likes e-checkbox-nocolor_empty" type="checkbox" id="chb7a4">
  <label for="chb7a4">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-likes" type="checkbox" id="chb74"><label for="chb74">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-likes e-checkbox-nocolor_empty" type="checkbox" id="chb7a4"><label for="chb7a4">No color checkbox label</label></div>

clicks
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-clicks

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-clicks" type="checkbox" id="chb75">
  <label for="chb75">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-clicks e-checkbox-nocolor_empty" type="checkbox" id="chb7a5">
  <label for="chb7a5">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-clicks" type="checkbox" id="chb75"><label for="chb75">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-clicks e-checkbox-nocolor_empty" type="checkbox" id="chb7a5"><label for="chb7a5">No color checkbox label</label></div>

pageclick
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-pageclick

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-pageclick" type="checkbox" id="chb76">
  <label for="chb76">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-pageclick e-checkbox-nocolor_empty" type="checkbox" id="chb7a6">
  <label for="chb7a6">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-pageclick" type="checkbox" id="chb76"><label for="chb76">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-pageclick e-checkbox-nocolor_empty" type="checkbox" id="chb7a6"><label for="chb7a6">No color checkbox label</label></div>

cpc
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-cpc

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-cpc" type="checkbox" id="chb77">
  <label for="chb77">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-cpc e-checkbox-nocolor_empty" type="checkbox" id="chb7a7">
  <label for="chb7a7">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-cpc" type="checkbox" id="chb77"><label for="chb77">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-cpc e-checkbox-nocolor_empty" type="checkbox" id="chb7a7"><label for="chb7a7">No color checkbox label</label></div>

frequency
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-frequency

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-frequency" type="checkbox" id="chb78">
  <label for="chb78">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-frequency e-checkbox-nocolor_empty" type="checkbox" id="chb7a8">
  <label for="chb7a8">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-frequency" type="checkbox" id="chb78"><label for="chb78">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-frequency e-checkbox-nocolor_empty" type="checkbox" id="chb7a8"><label for="chb7a8">No color checkbox label</label></div>

comments
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-comments

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-comments" type="checkbox" id="chb79">
  <label for="chb79">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-comments e-checkbox-nocolor_empty" type="checkbox" id="chb7a9">
  <label for="chb7a9">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-comments" type="checkbox" id="chb79"><label for="chb79">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-comments e-checkbox-nocolor_empty" type="checkbox" id="chb7a9"><label for="chb7a9">No color checkbox label</label></div>

conversions
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-conversions

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-conversions" type="checkbox" id="chb710">
  <label for="chb710">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-conversions e-checkbox-nocolor_empty" type="checkbox" id="chb7a10">
  <label for="chb7a10">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-conversions" type="checkbox" id="chb710"><label for="chb710">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-conversions e-checkbox-nocolor_empty" type="checkbox" id="chb7a10"><label for="chb7a10">No color checkbox label</label></div>

spent
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-spent

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-spent" type="checkbox" id="chb711">
  <label for="chb711">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-spent e-checkbox-nocolor_empty" type="checkbox" id="chb7a11">
  <label for="chb7a11">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-spent" type="checkbox" id="chb711"><label for="chb711">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-spent e-checkbox-nocolor_empty" type="checkbox" id="chb7a11"><label for="chb7a11">No color checkbox label</label></div>

revenue
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-revenue

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-revenue" type="checkbox" id="chb712">
  <label for="chb712">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-revenue e-checkbox-nocolor_empty" type="checkbox" id="chb7a12">
  <label for="chb7a12">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-revenue" type="checkbox" id="chb712"><label for="chb712">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-revenue e-checkbox-nocolor_empty" type="checkbox" id="chb7a12"><label for="chb7a12">No color checkbox label</label></div>

cpm
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-cpm

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-cpm" type="checkbox" id="chb713">
  <label for="chb713">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-cpm e-checkbox-nocolor_empty" type="checkbox" id="chb7a13">
  <label for="chb7a13">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-cpm" type="checkbox" id="chb713"><label for="chb713">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-cpm e-checkbox-nocolor_empty" type="checkbox" id="chb7a13"><label for="chb7a13">No color checkbox label</label></div>

costperconversion
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-costperconversion

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-costperconversion" type="checkbox" id="chb714">
  <label for="chb714">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-costperconversion e-checkbox-nocolor_empty" type="checkbox" id="chb7a14">
  <label for="chb7a14">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-costperconversion" type="checkbox" id="chb714"><label for="chb714">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-costperconversion e-checkbox-nocolor_empty" type="checkbox" id="chb7a14"><label for="chb7a14">No color checkbox label</label></div>

Smart Insight color variations

current_period
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-current_period

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-current_period" type="checkbox" id="chb81">
  <label for="chb81">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-current_period e-checkbox-nocolor_empty" type="checkbox" id="chb8a1">
  <label for="chb8a1">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-current_period" type="checkbox" id="chb81"><label for="chb81">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-current_period e-checkbox-nocolor_empty" type="checkbox" id="chb8a1"><label for="chb8a1">No color checkbox label</label></div>

comparison_period
Copy Pug
Copy HTML
Show code
Hide code
.e-checkbox-comparison_period

<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-comparison_period" type="checkbox" id="chb82">
  <label for="chb82">
    Checkbox label
  </label>
</div>
<div class="e-field e-field-inline">
  <input class="e-checkbox e-checkbox-comparison_period e-checkbox-nocolor_empty" type="checkbox" id="chb8a2">
  <label for="chb8a2">
    No color checkbox label
  </label>
</div>

<div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-comparison_period" type="checkbox" id="chb82"><label for="chb82">Checkbox label</label></div><div class="e-field e-field-inline"><input class="e-checkbox e-checkbox-comparison_period e-checkbox-nocolor_empty" type="checkbox" id="chb8a2"><label for="chb8a2">No color checkbox label</label></div>

Related components

SwitchRadioButton radio

Checkbox

Use Checkboxes when a list of options is given and the user may select any number of choices - zero, one, or several. A Checkbox can also be stand-alone. Use it as a single option that the user can select or leave unselected.

Best practices

A stand-alone Checkbox should:

  • Let the user select or deselect a single option.
  • Let the user see an already made selection that cannot be undone by turning into disabled state.
  • Have a clear group label that describes what the selection is about. Consider using subheader to break up a long list of checkboxes into logical groups. This makes the choices faster to scan and easier to understand.
  • Have their labels positioned on the right side of the boxes.
  • Let users interact with them by clicking on either the box itself or its label.
  • Be clearly labelled with a few words in a single line of text.
  • Be prepared to be validated.
  • Only apply their effect on submitting (should it be intentional by the user or automatic). Until submission they are in an interim state.
  • Also be able to take immediate effect, like displaying an interface element, but shouldn’t activate processes.

Checkboxes in a list should:

  • Let the user select multiple choices from a list of options.
  • Work independently from each other in a list, so checking one box doesn't uncheck another.
  • Align vertically to emphasise the connection between the options but separate the items visually. More than one column is acceptable if the list is so long that it requires scrolling when the comparison of elements is necessary.
  • Follow an intentional logic upon ordering, for example frequency of use.

Try to avoid:

  • Letting Checkboxes trigger actions.
  • Using them for switching between two states immediately, like on/off. Use the Switch component instead.
  • Sorting items in alphabetical order. It could make localisation difficult.
  • Using list of Checkboxes when there are mutually exclusive options and the user must select exactly one choice, use Radio buttons instead.
  • Overwhelming the UI with high amount of options. Use Multiselect component with search instead.
  • Aligning items horizontally, because they can make the affiliation of boxes and labels indistinct.

Content guidelines

Checkbox labels

Checkbox labels should:

  • Start with a capital letter.
  • Not end in punctuation unless they form sentences.
  • Have positive and active wording, so that it's clear what will happen if the user turns on the Checkbox. Avoid cases when the user has to the check the box in order for something not to happen.
  • Avoid overlapping choices. e.g. Age of contacts: 0-18, 18-35 - Where will be 18 years olds sorted?