diff --git a/index.html b/index.html
index a967e48fd..7bf7079a7 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
 				<h2>Checkboxes</h2>
 				<div class="thin-box">
 					<section id="checkboxes-block">
-
+						<div id="myCheckbox1Wrapper" style="width: 300px;"></div>
 						<div class="checkbox" id="myCheckbox">
 							<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
 								<input class="sr-only" type="checkbox" value="" />
diff --git a/index.js b/index.js
index bb3871400..784a56b67 100644
--- a/index.js
+++ b/index.js
@@ -30,6 +30,10 @@ define(function (require) {
 	 CHECKBOX
 	 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
+	var checkbox = require('hbs!fuelux_templates/checkbox');
+	var $myCheckbox1Wrapper = $('#myCheckbox1Wrapper');
+	$myCheckbox1Wrapper.html(checkbox({ id: 'myCheckbox1', required: true, validation: 'error', label: 'Checkboxes', checkboxes: [{label: 'Checkbox Label 1' }, {label: 'Checkbox Label 2' }]}));
+
 	// sample method buttons
 	$('#btnCheckboxToggle').on('click', function () {
 		$('#myCustomCheckbox1').checkbox('toggle');