diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index af019d944..15aeef9f6 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -7,7 +7,12 @@
     </div>
     <div class="row">
       <div class="col">
-        <checkbox/>
+        <checkbox
+          checkboxName="demo checkbox"
+          buttonID="checkbox-1"
+          tabIndex="1"
+          checkboxLabel="I'm a checkbox"
+        />
       </div>
     </div>
     <div class="row my-4">
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 2c145a1ad..22d6a6784 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="ui-checkbox d-flex">
-    <input type="checkbox" name="Checkbox" id="check_1" tabindex="0" />
-    <label class="d-flex align-items-center" for="check_1">
-      <p class="m-0 lh-1">Checkbox</p>
+    <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p class="m-0 lh-1">{{checkboxLabel}}</p>
     </label>
   </div>
 </template>
 
 <script>
 export default {
-  name: "checkbox"
+  name: "checkbox",
+  props: {
+    checkboxName: String,
+    buttonID: String,
+    tabIndex: Number,
+    checkboxLabel: String
+  }
 };
 </script>