Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

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
Open in playground
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>
JavaScript
Copy JavaScript

Variations

Only checkbox
Copy Pug
Copy HTML
Open in playground
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>
          Labore in ex sed 
        </td>
      </tr>
      <tr>
        <td>
          <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="chb_ochb2">
          <label for="chb_ochb2"></label>
        </td>
        <td>
          Ut ut officia dolor est 
        </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>
          In ut deserunt aute 
        </td>
      </tr>
      <tr>
        <td>
          <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="chb_ochb2">
          <label for="chb_ochb2"></label>
        </td>
        <td>
          Eu dolor in mollit aute 
        </td>
      </tr>
    </tbody>
  </table>
</div>
JavaScript
Copy JavaScript
Id et dolor dolore
Elit sunt id tempor eiusmod

Indeterminate
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
:indeterminate

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

Error
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Dropdown
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript
Select allSelect noneSelect trackedSelect untracked

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

<div style="width: 200px">
  <label class="e-field__label">
    Clear 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, consectetur adipisicing elit, sed do eiusmod.
  </label>
</div>
<div style="width: 200px">
  <label class="e-field__label">
    Clear 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, consectetur adipisicing elit, sed do eiusmod.
  </label>
</div>
JavaScript
Copy JavaScript

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

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

Disabled
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Service specific variations

Reporting color variations

opened
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

mobile_opened
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

desktop_opened
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

sent
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

clicked
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

mobile_clicked
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

desktop_clicked
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

mobile_click_through
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

delivered
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

bounced
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

purchased
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

unsubscribed
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

complained
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

optin_users
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Socialads color variations

impressions
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

socialreach
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

reach
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

likes
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

clicks
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

pageclick
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

cpc
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

frequency
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

comments
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

conversions
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

spent
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

revenue
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

cpm
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

costperconversion
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Smart Insight color variations

current_period
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

comparison_period
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Related components

SwitchRadio ButtonToggle

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