From 8abe40c7047cb073a2c4e4ef17ac946833c13dcf Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 16 Dec 2021 17:29:44 -0500
Subject: [PATCH] CSR-241 WIP checkbox props update.

---
 src/layouts/component-test/component-test.vue |  7 ++++++-
 src/ux-components/checkbox/checkbox.vue       | 14 ++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

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>