diff --git a/demo/checkbox-a11y-demos.html b/demo/checkbox-a11y-demos.html
deleted file mode 100644
index 7c0fed8..0000000
--- a/demo/checkbox-a11y-demos.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<dom-module id="checkbox-accessibility-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-    <h3>Accessible Checkbox</h3>
-    <p>You can wrap any content inside the <code>&lt;vaadin-checkbox&gt;</code> element – you don’t need to wrap it with an extra <code>&lt;label&gt;</code> element.</p>
-    <p>The content acts as the accessible label for the checkbox. The user can click on the label to toggle the checkbox, and screen readers will announce the text content when the checkbox is focused.</p>
-    <p>You can focus the checkbox using the keyboard and activate it with the <kbd>Space</kbd> key. Notice how the visual active style is also triggered, giving keyboard users clear visual feedback that the checkbox was toggled.</p>
-    <vaadin-demo-snippet id='button-a11y-demos-accessible-label'>
-      <template preserve-content>
-        <vaadin-checkbox>Option</vaadin-checkbox>
-      </template>
-    </vaadin-demo-snippet>
-
-  </template>
-  <script>
-    class CheckboxA11yDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
-      static get is() {
-        return 'checkbox-accessibility-demos';
-      }
-    }
-    customElements.define(CheckboxA11yDemos.is, CheckboxA11yDemos);
-  </script>
-</dom-module>
diff --git a/demo/checkbox-basic-demos.html b/demo/checkbox-basic-demos.html
index a15824b..8febb7f 100644
--- a/demo/checkbox-basic-demos.html
+++ b/demo/checkbox-basic-demos.html
@@ -5,47 +5,142 @@
         display: block;
       }
     </style>
-
-    <h3>Basic Checkbox</h3>
-    <vaadin-demo-snippet id="checkbox-basic-demos-default-checkbox">
+    <h3>Basic usage</h3>
+    <vaadin-demo-snippet>
       <template preserve-content>
-        <vaadin-checkbox checked>I agree with <a href>Terms & Conditions</a></vaadin-checkbox>
+        <vaadin-checkbox value="Option" checked>Option</vaadin-checkbox>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Custom Label</h3>
-    <vaadin-demo-snippet id="checkbox-basic-demos-multiline-checkbox">
+    <h3>Basic usage with checkbox group</h3>
+    <vaadin-demo-snippet>
       <template preserve-content>
-        <vaadin-checkbox checked>
-          <iron-icon icon="lumo:bell" style="vertical-align: top;"></iron-icon>
-          Notifications
-          <br>
-          <small>Enable desktop notifications</small>
-        </vaadin-checkbox>
+        <vaadin-checkbox-group label="Label" theme="vertical">
+          <vaadin-checkbox value="1" checked>Option one</vaadin-checkbox>
+          <vaadin-checkbox value="2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value="3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Disabled</h3>
-    <vaadin-demo-snippet id="checkbox-basic-demos-disabled-checkbox">
+    <h3>Disabled state</h3>
+    <vaadin-demo-snippet>
       <template preserve-content>
-        <vaadin-checkbox disabled checked>
-          Option two<br>
-          <small>Description for this option</small>
-        </vaadin-checkbox>
+        <vaadin-checkbox-group label="Disabled" theme="vertical" disabled>
+          <vaadin-checkbox value="1" checked>Option one</vaadin-checkbox>
+          <vaadin-checkbox value="2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value="3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+
+        <vaadin-checkbox-group label="Disabled item" theme="vertical">
+          <vaadin-checkbox value="1">Option one</vaadin-checkbox>
+          <vaadin-checkbox value="2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value="3" disabled>Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+        <style>
+          vaadin-checkbox-group:first-of-type {
+            margin-right: 200px;
+          }
+        </style>
+      </template>
+    </vaadin-demo-snippet>
 
-        <vaadin-checkbox disabled>Option two</vaadin-checkbox>
+    <h3>Object list</h3>
+    <vaadin-demo-snippet id="object-list" when-defined="vaadin-checkbox">
+      <template preserve-content>
+        <vaadin-checkbox-group label="Department" theme="vertical"></vaadin-checkbox-group>
+        <script>
+          window.addDemoReadyListener('#object-list', function(document) {
+            const departments = [
+              {id: '1', name: 'Product'},
+              {id: '2', name: 'Service'},
+              {id: '3', name: 'HR'},
+              {id: '4', name: 'Accounting'}
+            ];
+            const checkboxGroup = document.querySelector('vaadin-checkbox-group');
+            departments.forEach(function(item) {
+              const checkbox = window.document.createElement('vaadin-checkbox');
+              checkbox.textContent = item.name;
+              checkbox.value = item.id;
+              checkboxGroup.appendChild(checkbox);
+            });
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
 
-        <vaadin-checkbox disabled indeterminate>Indeterminate</vaadin-checkbox>
+    <h3>Value change event</h3>
+    <vaadin-demo-snippet id="value-change-event" when-defined="vaadin-radio-button">
+      <template preserve-content>
+        <vaadin-checkbox-group label="Label" theme="vertical">
+          <vaadin-checkbox value = "1">Option one</vaadin-checkbox>
+          <vaadin-checkbox value = "2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value = "3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+        <div>Selected value: <span id="output"></span></div>
+        <script>
+          window.addDemoReadyListener('#value-change-event', function(document) {
+            const checkboxGroup = document.querySelector('vaadin-checkbox-group');
+            const output = document.querySelector('#output');
+            checkboxGroup.addEventListener('change', function(event) {
+              output.textContent = checkboxGroup.value;
+            });
+          });
+        </script>
       </template>
     </vaadin-demo-snippet>
 
-  </template>
-  <script>
-    class CheckboxBasicDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
-      static get is() {
-        return 'checkbox-basic-demos';
+
+    <h3>Indeterminate checkbox</h3>
+    <p>An <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes"
+      target="_blank" rel="noopener">indeterminate checkbox</a> is neither checked nor
+      unchecked. A typical use case
+      is a “Select All” checkbox indicating that some, but not all, items are selected.</p>
+      <vaadin-demo-snippet id="checkbox-indeterminate" when-defined="vaadin-checkbox">
+        <template preserve-content>
+          <vaadin-checkbox-group label="Label" theme="vertical">
+            <vaadin-checkbox class="select-all">Select All</vaadin-checkbox>
+            <vaadin-checkbox value="1">Option one</vaadin-checkbox>
+            <vaadin-checkbox value="2">Option two</vaadin-checkbox>
+            <script>
+              window.addDemoReadyListener('#checkbox-indeterminate', function(document) {
+                const options = Array.from(document.querySelectorAll('vaadin-checkbox[value]'));
+                const selectAll = document.querySelector('.select-all');
+
+                selectAll.addEventListener('change', function() {
+                  options.forEach(function(option) {
+                    option.checked = selectAll.checked;
+                  });
+                });
+
+                const syncState = function() {
+                  const isChecked = function(cb) {
+                    return cb.checked;
+                  };
+                  selectAll.checked = options.every(isChecked);
+                  selectAll.indeterminate = options.some(isChecked) && !options.every(isChecked);
+                };
+
+                options.forEach(function(option) {
+                  option.addEventListener('change', syncState);
+                });
+
+                options[0].checked = true;
+                syncState();
+              });
+            </script>
+          </vaadin-checkbox-group>
+        </template>
+      </vaadin-demo-snippet>
+
+    </template>
+    <script>
+      class CheckboxBasicDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
+        static get is() {
+          return 'checkbox-basic-demos';
+        }
       }
-    }
-    customElements.define(CheckboxBasicDemos.is, CheckboxBasicDemos);
-  </script>
-</dom-module>
+      customElements.define(CheckboxBasicDemos.is, CheckboxBasicDemos);
+    </script>
+  </dom-module>
diff --git a/demo/checkbox-group-demos.html b/demo/checkbox-group-demos.html
deleted file mode 100644
index 93e2fec..0000000
--- a/demo/checkbox-group-demos.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<dom-module id="checkbox-group-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-    <h3>Checkbox Group</h3>
-    <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-value" when-defined="vaadin-checkbox-group">
-      <template preserve-content>
-        <vaadin-checkbox-group label="Preferred language of contact">
-          <vaadin-checkbox value="en">English</vaadin-checkbox>
-          <vaadin-checkbox value="fr">Français</vaadin-checkbox>
-          <vaadin-checkbox value="de">Deutsch</vaadin-checkbox>
-        </vaadin-checkbox-group>
-        <p>Selected value: <span id="value"></span></p>
-        <script>
-          window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-value', function(document) {
-            const checkboxGroup = document.querySelector('vaadin-checkbox-group');
-            const selectedValue = document.getElementById('value');
-
-            checkboxGroup.addEventListener('value-changed', function(event) {
-              selectedValue.textContent = event.detail.value;
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-    <h3>Checkbox Group Disabled</h3>
-    <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-disabled">
-      <template preserve-content>
-        <vaadin-checkbox-group label="Disabled" disabled>
-          <vaadin-checkbox value="1">1</vaadin-checkbox>
-          <vaadin-checkbox value="2">2</vaadin-checkbox>
-          <vaadin-checkbox value="3">3</vaadin-checkbox>
-          <vaadin-checkbox value="4">4</vaadin-checkbox>
-        </vaadin-checkbox-group>
-      </template>
-    </vaadin-demo-snippet>
-
-    <h3>Checkbox Group with Iron Form with same names</h3>
-    <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form" when-defined="vaadin-checkbox-group">
-      <template preserve-content>
-        <iron-form>
-          <form>
-            <vaadin-checkbox-group>
-              <vaadin-checkbox name="checkbox-group" value="1">1</vaadin-checkbox>
-              <vaadin-checkbox name="checkbox-group" value="2">2</vaadin-checkbox>
-              <vaadin-checkbox name="checkbox-group" value="3">3</vaadin-checkbox>
-              <vaadin-checkbox name="checkbox-group" value="4">4</vaadin-checkbox>
-            </vaadin-checkbox-group>
-            <vaadin-button>Submit</vaadin-button>
-          </form>
-          <div id="form-output"></div>
-        </iron-form>
-        <script>
-          window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form', function(document) {
-            const testForm = document.querySelector('iron-form');
-            const submitButton = document.querySelector('vaadin-button');
-
-            submitButton.addEventListener('click', function(event) {
-              testForm.submit();
-            });
-
-            testForm.addEventListener('iron-form-submit', function(event) {
-              document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-    <h3>Checkbox Group with Iron Form with different names</h3>
-    <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form-with-custom-value" when-defined="vaadin-checkbox-group">
-      <template preserve-content>
-        <iron-form>
-          <form>
-            <vaadin-checkbox-group>
-              <vaadin-checkbox name="first-checkbox-group" value="1">1</vaadin-checkbox>
-              <vaadin-checkbox name="second-checkbox-group" value="2">2</vaadin-checkbox>
-              <vaadin-checkbox name="third-checkbox-group" value="3">3</vaadin-checkbox>
-              <vaadin-checkbox name="fourth-checkbox-group" value="4">4</vaadin-checkbox>
-            </vaadin-checkbox-group>
-            <vaadin-button>Submit</vaadin-button>
-          </form>
-          <div id="form-output"></div>
-        </iron-form>
-        <script>
-          window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form-with-custom-value', function(document) {
-            const testForm = document.querySelector('iron-form');
-            const submitButton = document.querySelector('vaadin-button');
-
-            submitButton.addEventListener('click', function(event) {
-              testForm.submit();
-            });
-
-            testForm.addEventListener('iron-form-submit', function(event) {
-              document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-  </template>
-  <script>
-    class CheckboxGroupDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
-      static get is() {
-        return 'checkbox-group-demos';
-      }
-    }
-    customElements.define(CheckboxGroupDemos.is, CheckboxGroupDemos);
-  </script>
-</dom-module>
diff --git a/demo/checkbox-group-validation-demos.html b/demo/checkbox-group-validation-demos.html
deleted file mode 100644
index 863b8cb..0000000
--- a/demo/checkbox-group-validation-demos.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<dom-module id="checkbox-group-validation-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-    <h3>Checkbox Group with validation message</h3>
-    <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-validation-message" when-defined="vaadin-checkbox-group">
-      <template preserve-content>
-        <vaadin-checkbox-group required label="Preferred language of contact" error-message="Please choose a language.">
-          <vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
-          <vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
-          <vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
-        </vaadin-checkbox-group>
-        <vaadin-button>Validate</vaadin-button>
-        <script>
-          window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-validation-message', function(document) {
-            const checkboxGroup = document.querySelector('vaadin-checkbox-group');
-            const submitButton = document.querySelector('vaadin-button');
-
-            submitButton.addEventListener('click', function(event) {
-              checkboxGroup.validate();
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-    <h3>Checkbox Group with Iron Form validation</h3>
-    <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form-validation" when-defined="vaadin-checkbox-group">
-      <template preserve-content>
-        <iron-form>
-          <form>
-            <vaadin-checkbox-group required label="Preferred language of contact">
-              <vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
-              <vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
-              <vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
-            </vaadin-checkbox-group>
-            <vaadin-button>Submit</vaadin-button>
-          </form>
-          <div id="form-output"></div>
-        </iron-form>
-        <script>
-          window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form-validation', function(document) {
-            const testForm = document.querySelector('iron-form');
-            const submitButton = document.querySelector('vaadin-button');
-
-            submitButton.addEventListener('click', function(event) {
-              testForm.submit();
-            });
-
-            testForm.addEventListener('iron-form-submit', function(event) {
-              document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-  </template>
-  <script>
-    class CheckboxGroupValidationDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
-      static get is() {
-        return 'checkbox-group-validation-demos';
-      }
-    }
-    customElements.define(CheckboxGroupValidationDemos.is, CheckboxGroupValidationDemos);
-  </script>
-</dom-module>
diff --git a/demo/checkbox-indeterminate-demos.html b/demo/checkbox-indeterminate-demos.html
deleted file mode 100644
index 007728a..0000000
--- a/demo/checkbox-indeterminate-demos.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<dom-module id="checkbox-indeterminate-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-    <h3>Indeterminate Checkbox</h3>
-    <p>An <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes" target="_blank" rel="noopener">indeterminate checkbox</a> is neither checked nor unchecked. A typical use case is a “Select All” checkbox indicating that some, but not all, items are selected.</p>
-    <vaadin-demo-snippet id="checkbox-indeterminate-demo" when-defined="vaadin-checkbox">
-      <template preserve-content>
-        <vaadin-checkbox class="select-all">Select All</vaadin-checkbox>
-        <vaadin-checkbox value="one">Option one</vaadin-checkbox>
-        <vaadin-checkbox value="two">Option two</vaadin-checkbox>
-        <script>
-          window.addDemoReadyListener('#checkbox-indeterminate-demo', function(document) {
-            const options = Array.from(document.querySelectorAll('vaadin-checkbox[value]'));
-            const selectAll = document.querySelector('.select-all');
-
-            selectAll.addEventListener('change', function() {
-              options.forEach(function(option) {
-                option.checked = selectAll.checked;
-              });
-            });
-
-            const syncState = function() {
-              const isChecked = function(cb) {
-                return cb.checked;
-              };
-              selectAll.checked = options.every(isChecked);
-              selectAll.indeterminate = options.some(isChecked) && !options.every(isChecked);
-            };
-
-            options.forEach(function(option) {
-              option.addEventListener('change', syncState);
-            });
-
-            options[0].checked = true;
-            syncState();
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-  </template>
-  <script>
-    class CheckboxIndeterminateDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
-      static get is() {
-        return 'checkbox-indeterminate-demos';
-      }
-    }
-    customElements.define(CheckboxIndeterminateDemos.is, CheckboxIndeterminateDemos);
-  </script>
-</dom-module>
diff --git a/demo/checkbox-presentation-demos.html b/demo/checkbox-presentation-demos.html
new file mode 100644
index 0000000..09fded0
--- /dev/null
+++ b/demo/checkbox-presentation-demos.html
@@ -0,0 +1,68 @@
+<dom-module id="checkbox-presentation-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <h3>Customizing checkbox label</h3>
+    <vaadin-demo-snippet>
+      <template preserve-content>
+        <vaadin-checkbox-group label="User" theme="vertical">
+          <vaadin-checkbox checked value="1">
+            <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
+            src="https://randomuser.me/api/portraits/women/43.jpg" />
+            Gabriella
+          </vaadin-checkbox>
+          <vaadin-checkbox value="2">
+            <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
+            src="https://randomuser.me/api/portraits/men/77.jpg" />
+            Rudi
+          </vaadin-checkbox>
+          <vaadin-checkbox value="3">
+            <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
+            src="https://randomuser.me/api/portraits/men/35.jpg" />
+            Hamsa
+          </vaadin-checkbox>
+          <vaadin-checkbox value="4">
+            <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
+            src="https://randomuser.me/api/portraits/men/76.jpg" />
+            Jacob
+          </vaadin-checkbox>
+        </vaadin-checkbox-group>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Multi-line label</h3>
+    <vaadin-demo-snippet>
+      <template preserve-content>
+        <vaadin-checkbox-group theme="vertical">
+          <vaadin-checkbox checked value="1">
+            <b>Option one</b>
+            <div>Description</div>
+          </vaadin-checkbox>
+
+          <vaadin-checkbox value="2">
+            <b>Option two</b>
+            <div>Description</div>
+          </vaadin-checkbox>
+
+          <vaadin-checkbox disabled value="3">
+            <b>Option three</b>
+            <div>Description</div>
+          </vaadin-checkbox>
+        </vaadin-checkbox-group>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class CheckboxPresentationDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
+      static get is() {
+        return 'checkbox-presentation-demos';
+      }
+    }
+    customElements.define(CheckboxPresentationDemos.is, CheckboxPresentationDemos);
+  </script>
+</dom-module>
diff --git a/demo/checkbox-styling-demos.html b/demo/checkbox-styling-demos.html
new file mode 100644
index 0000000..dcdc196
--- /dev/null
+++ b/demo/checkbox-styling-demos.html
@@ -0,0 +1,54 @@
+<dom-module id="checkbox-styling-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+    <h3>Customizing font</h3>
+    <vaadin-demo-snippet id="customizing-font">
+      <template preserve-content>
+        <style>
+          vaadin-checkbox {
+            font-weight: bold;
+            font-family: sans-serif;
+          }
+        </style>
+        <vaadin-checkbox-group label="Label" theme="vertical">
+          <vaadin-checkbox checked value="1">Option one</vaadin-checkbox>
+          <vaadin-checkbox value="2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value="3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Customizing icon color</h3>
+    <vaadin-demo-snippet id="customizing-icon-color">
+      <template preserve-content>
+        <dom-module id="checkbox-button-icon-color" theme-for="vaadin-checkbox">
+          <template>
+            <style>
+              :host([theme~="custom"][checked]) [part="checkbox"] {
+                background-color: green;
+              }
+            </style>
+          </template>
+        </dom-module>
+        <vaadin-checkbox-group label="Label" theme="vertical">
+          <vaadin-checkbox checked theme="custom" value="1">Option one</vaadin-checkbox>
+          <vaadin-checkbox theme="custom" value="2">Option two</vaadin-checkbox>
+          <vaadin-checkbox theme="custom" value="3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class CheckboxStylingDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
+      static get is() {
+        return 'checkbox-styling-demos';
+      }
+    }
+    customElements.define(CheckboxStylingDemos.is, CheckboxStylingDemos);
+  </script>
+</dom-module>
diff --git a/demo/checkbox-theme-variants-demos.html b/demo/checkbox-theme-variants-demos.html
new file mode 100644
index 0000000..ef8313b
--- /dev/null
+++ b/demo/checkbox-theme-variants-demos.html
@@ -0,0 +1,36 @@
+<dom-module id="checkbox-theme-variants-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+    <h3>Orientation</h3>
+    <vaadin-demo-snippet>
+      <template preserve-content>
+        <h4>Horizontal</h4>
+        <vaadin-checkbox-group>
+          <vaadin-checkbox checked value= "1">Option one</vaadin-checkbox>
+          <vaadin-checkbox value= "2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value= "3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+
+        <h4>Vertical</h4>
+        <vaadin-checkbox-group theme="vertical">
+          <vaadin-checkbox checked value= "1">Option one</vaadin-checkbox>
+          <vaadin-checkbox value= "2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value= "3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class CheckboxThemeVariantsDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
+      static get is() {
+        return 'checkbox-theme-variants-demos';
+      }
+    }
+    customElements.define(CheckboxThemeVariantsDemos.is, CheckboxThemeVariantsDemos);
+  </script>
+</dom-module>
diff --git a/demo/checkbox-validation-demos.html b/demo/checkbox-validation-demos.html
new file mode 100644
index 0000000..97a025c
--- /dev/null
+++ b/demo/checkbox-validation-demos.html
@@ -0,0 +1,39 @@
+<dom-module id="checkbox-validation-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <h3>Required</h3>
+    <vaadin-demo-snippet id="checkbox-required" when-defined="vaadin-checkbox-group">
+      <template preserve-content>
+        <vaadin-checkbox-group label="Required" required error-message="Please choose one option" theme="vertical">
+          <vaadin-checkbox value="1">Option one</vaadin-checkbox>
+          <vaadin-checkbox value="2">Option two</vaadin-checkbox>
+          <vaadin-checkbox value="3">Option three</vaadin-checkbox>
+        </vaadin-checkbox-group>
+        <vaadin-button>Submit</vaadin-button>
+        <script>
+          window.addDemoReadyListener('#checkbox-required', function(document) {
+            const submit = document.querySelector('vaadin-button');
+            const checkboxGroup = document.querySelector('vaadin-checkbox-group');
+            submit.addEventListener('click', function(event) {
+              checkboxGroup.validate();
+            });
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class CheckboxValidationDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
+      static get is() {
+        return 'checkbox-validation-demos';
+      }
+    }
+    customElements.define(CheckboxValidationDemos.is, CheckboxValidationDemos);
+  </script>
+</dom-module>
diff --git a/demo/demos.json b/demo/demos.json
index fc0bfe8..52e2e80 100644
--- a/demo/demos.json
+++ b/demo/demos.json
@@ -9,48 +9,48 @@
       "title": "Vaadin Checkbox Basics",
       "description": "",
       "image": ""
-     }
+    }
   }
   ,
   {
-    "name": "Indeterminate State",
-    "url": "checkbox-indeterminate-demos",
-    "src": "checkbox-indeterminate-demos.html",
+    "name": "Validation",
+    "url": "checkbox-validation-demos",
+    "src": "checkbox-validation-demos.html",
     "meta": {
-      "title": "Vaadin Checkbox Indeterminate State",
+      "title": "Vaadin Checkbox Validations",
       "description": "",
       "image": ""
-     }
+    }
   }
   ,
   {
-    "name": "Accessibility",
-    "url": "checkbox-accessibility-demos",
-    "src": "checkbox-a11y-demos.html",
+    "name": "Presentation",
+    "url": "checkbox-presentation-demos",
+    "src": "checkbox-presentation-demos.html",
     "meta": {
-      "title": "Vaadin Checkbox Accessibility",
+      "title": "Vaadin Checkbox Presentations",
       "description": "",
       "image": ""
-     }
+    }
   }
   ,
   {
-    "name": "Checkbox Group",
-    "url": "checkbox-group-demos",
-    "src": "checkbox-group-demos.html",
+    "name": "Theme Variants",
+    "url": "checkbox-theme-variants-demos",
+    "src": "checkbox-theme-variants-demos.html",
     "meta": {
-      "title": "vaadin-checkbox-group Examples",
+      "title": "vaadin-checkbox Theme Variants",
       "description": "",
       "image": ""
     }
   }
   ,
   {
-    "name": "Checkbox Group Validation",
-    "url": "checkbox-group-validation-demos",
-    "src": "checkbox-group-validation-demos.html",
+    "name": "Styling",
+    "url": "checkbox-styling-demos",
+    "src": "checkbox-styling-demos.html",
     "meta": {
-      "title": "vaadin-checkbox-group Validation Examples",
+      "title": "vaadin-checkbox-group Styling Examples",
       "description": "",
       "image": ""
     }
diff --git a/demo/index.html b/demo/index.html
index 34eefed..7dee16c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,16 +9,12 @@
   <link rel="import" href="../../polymer/polymer.html">
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-snippet.html">
-  <script src="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.js"></script>
 
   <script src="./checkbox-demo.js"></script>
-  <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../vaadin-button/vaadin-button.html">
   <link rel="import" href="../vaadin-checkbox.html">
   <link rel="import" href="../vaadin-checkbox-group.html">
 
-  <link rel="import" href="../../vaadin-lumo-styles/icons.html">
-
   <custom-style>
     <style include="vaadin-component-demo-shared-styles"></style>
   </custom-style>
@@ -26,5 +22,16 @@
 
 <body>
   <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
+
+  <dom-module id="checkbox-button-icon-color" theme-for="vaadin-checkbox">
+    <template>
+      <style>
+        :host([theme~="custom"][checked]) [part="checkbox"] {
+          background-color: green;
+        }
+      </style>
+    </template>
+  </dom-module>
+
 </body>
 </html>