diff --git a/docs/_pages/components.md b/docs/_pages/components.md
index 6b282d94..2a5e0536 100644
--- a/docs/_pages/components.md
+++ b/docs/_pages/components.md
@@ -178,15 +178,39 @@ categories:
       - name: checkbox
         caption: Checkbox
         class: mdl-checkbox
-      - name: icon-toggle
-        caption: Icon toggle
-        class: mdl-icon-toggle
+        snippets:
+          - snippet_group:
+            - caption: Check on
+              file: check-on.html
+            - caption: Check off
+              file: check-off.html
       - name: radio
         caption: Radio button
         class: mdl-radio
+        snippets:
+          - snippet_group:
+            - caption: Radio on
+              file: radio-on.html
+            - caption: Radio off
+              file: radio-off.html
+      - name: icon-toggle
+        caption: Icon toggle
+        class: mdl-icon-toggle
+        snippets:
+          - snippet_group:
+            - caption: Icon on
+              file: icon-on.html
+            - caption: Icon off
+              file: icon-off.html
       - name: switch
         caption: Switch
         class: mdl-switch
+        snippets:
+          - snippet_group:
+            - caption: Switch on
+              file: switch-on.html
+            - caption: Switch off
+              file: switch-off.html
   - name: tables
     title: Tables
     description: Organize data.
diff --git a/src/checkbox/demo.html b/src/checkbox/demo.html
deleted file mode 100644
index 58ecab81..00000000
--- a/src/checkbox/demo.html
+++ /dev/null
@@ -1,23 +0,0 @@
-  <div class="demo-preview-block">
-
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
-      <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" />
-      <span class="mdl-checkbox__label">Check me out</span>
-    </label>
-
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
-      <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
-      <span class="mdl-checkbox__label">I'm just a Material girl in a Material world</span>
-    </label>
-
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
-      <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" />
-      <span class="mdl-checkbox__label">Try using checkboxes</span>
-    </label>
-
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-5">
-      <input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled />
-      <span class="mdl-checkbox__label">But not this one</span>
-    </label>
-
-  </div>
diff --git a/src/checkbox/snippets/check-off.html b/src/checkbox/snippets/check-off.html
new file mode 100644
index 00000000..f4ae4c7e
--- /dev/null
+++ b/src/checkbox/snippets/check-off.html
@@ -0,0 +1,4 @@
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
+  <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
+  <span class="mdl-checkbox__label">Checkbox</span>
+</label>
diff --git a/src/checkbox/snippets/check-on.html b/src/checkbox/snippets/check-on.html
new file mode 100644
index 00000000..d1fc885c
--- /dev/null
+++ b/src/checkbox/snippets/check-on.html
@@ -0,0 +1,4 @@
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
+  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
+  <span class="mdl-checkbox__label">Checkbox</span>
+</label>
diff --git a/src/icon-toggle/demo.css b/src/icon-toggle/demo.css
deleted file mode 100644
index 29313bf6..00000000
--- a/src/icon-toggle/demo.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.demo-icon-toggle-block {
-  display: inline-block;
-  margin: 0 20px 20px 0;
-}
diff --git a/src/icon-toggle/demo.html b/src/icon-toggle/demo.html
deleted file mode 100644
index cd9e1b5a..00000000
--- a/src/icon-toggle/demo.html
+++ /dev/null
@@ -1,38 +0,0 @@
-  <div class="demo-preview-block">
-
-    <div class="demo-icon-toggle-block">
-      <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
-        <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" />
-        <i class="mdl-icon-toggle__label material-icons">format_bold</i>
-      </label>
-
-      <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
-        <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" />
-        <i class="mdl-icon-toggle__label material-icons">format_italic</i>
-      </label>
-
-      <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-3">
-        <input type="checkbox" id="icon-toggle-3" class="mdl-icon-toggle__input" />
-        <i class="mdl-icon-toggle__label material-icons">format_underline</i>
-      </label>
-    </div>
-
-    <h2>Disabled</h2>
-
-    <div class="demo-icon-toggle-block">
-      <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-icon-toggle-1">
-        <input type="checkbox" id="disabled-icon-toggle-1" class="mdl-icon-toggle__input" disabled />
-        <i class="mdl-icon-toggle__label material-icons">format_bold</i>
-      </label>
-
-      <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-icon-toggle-2">
-        <input type="checkbox" id="disabled-icon-toggle-2" class="mdl-icon-toggle__input" disabled />
-        <i class="mdl-icon-toggle__label material-icons">format_italic</i>
-      </label>
-
-      <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-icon-toggle-3">
-        <input type="checkbox" id="disabled-icon-toggle-3" class="mdl-icon-toggle__input" disabled />
-        <i class="mdl-icon-toggle__label material-icons">format_underline</i>
-      </label>
-    </div>
-  </div>
diff --git a/src/icon-toggle/snippets/icon-off.html b/src/icon-toggle/snippets/icon-off.html
new file mode 100644
index 00000000..8772bc41
--- /dev/null
+++ b/src/icon-toggle/snippets/icon-off.html
@@ -0,0 +1,4 @@
+<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
+  <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" />
+  <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+</label>
diff --git a/src/icon-toggle/snippets/icon-on.html b/src/icon-toggle/snippets/icon-on.html
new file mode 100644
index 00000000..948fba2a
--- /dev/null
+++ b/src/icon-toggle/snippets/icon-on.html
@@ -0,0 +1,4 @@
+<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
+  <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked />
+  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+</label>
diff --git a/src/radio/demo.html b/src/radio/demo.html
deleted file mode 100644
index f04c6275..00000000
--- a/src/radio/demo.html
+++ /dev/null
@@ -1,26 +0,0 @@
-  <div class="demo-preview-block">
-
-  <p>A radio button can either be a primary action or a secondary action.</p>
-
-  <section class="demo-preview-block">
-    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
-      <input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
-      <span class="mdl-radio__label">Always</span>
-    </label>
-
-    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
-      <input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
-      <span class="mdl-radio__label">Only when plugged in</span>
-    </label>
-
-    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
-      <input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
-      <span class="mdl-radio__label">Never</span>
-    </label>
-
-    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
-      <input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
-      <span class="mdl-radio__label">Unavailable option</span>
-    </label>
-  </section>
-</div>
diff --git a/src/radio/snippets/radio-off.html b/src/radio/snippets/radio-off.html
new file mode 100644
index 00000000..24ecf02f
--- /dev/null
+++ b/src/radio/snippets/radio-off.html
@@ -0,0 +1,4 @@
+<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
+  <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2" />
+  <span class="mdl-radio__label">Option 2</span>
+</label>
diff --git a/src/radio/snippets/radio-on.html b/src/radio/snippets/radio-on.html
new file mode 100644
index 00000000..14957001
--- /dev/null
+++ b/src/radio/snippets/radio-on.html
@@ -0,0 +1,4 @@
+<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
+  <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked />
+  <span class="mdl-radio__label">Option 1</span>
+</label>
diff --git a/src/switch/demo.html b/src/switch/demo.html
deleted file mode 100644
index 4546ef67..00000000
--- a/src/switch/demo.html
+++ /dev/null
@@ -1,23 +0,0 @@
-  <div class="demo-preview-block">
-
-    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
-      <input type="checkbox" id="switch-1" class="mdl-switch__input" />
-      <span class="mdl-switch__label">Switch me</span>
-    </label>
-
-    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
-      <input type="checkbox" id="switch-2" class="mdl-switch__input" />
-      <span class="mdl-switch__label">Flip me left and right</span>
-    </label>
-
-    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-4">
-      <input type="checkbox" id="switch-4" class="mdl-switch__input" />
-      <span class="mdl-switch__label">Me too</span>
-    </label>
-
-    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-5">
-      <input type="checkbox" id="switch-5" class="mdl-switch__input" disabled />
-      <span class="mdl-switch__label">Can't touch this</span>
-    </label>
-
-  </div>
diff --git a/src/switch/snippets/switch-off.html b/src/switch/snippets/switch-off.html
new file mode 100644
index 00000000..4181cd69
--- /dev/null
+++ b/src/switch/snippets/switch-off.html
@@ -0,0 +1,4 @@
+<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
+  <input type="checkbox" id="switch-2" class="mdl-switch__input" />
+  <span class="mdl-switch__label">Switch me</span>
+</label>
diff --git a/src/switch/snippets/switch-on.html b/src/switch/snippets/switch-on.html
new file mode 100644
index 00000000..6692a97f
--- /dev/null
+++ b/src/switch/snippets/switch-on.html
@@ -0,0 +1,4 @@
+<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
+  <input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
+  <span class="mdl-switch__label">Switch me</span>
+</label>