From 30e71393cff4e116c842c56bf35ef84bd659448d Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Thu, 7 Nov 2024 05:11:05 +0530
Subject: [PATCH 1/9] HT-554:Update OXD CheckBox Components

---
 components/src/core/components/Icon/icons.ts | 87 ++++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/components/src/core/components/Icon/icons.ts b/components/src/core/components/Icon/icons.ts
index ea9c430a..d018e181 100644
--- a/components/src/core/components/Icon/icons.ts
+++ b/components/src/core/components/Icon/icons.ts
@@ -2122,6 +2122,88 @@ export const oxdExternalLink: icon = {
   value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><g id="Interface / External_Link"><path id="Vector" style="fill:none" d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>`,
 };
 
+export const oxdOnLeave: icon = {
+  name: 'oxd-on-leave',
+  value: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 800"  xml:space="preserve">
+<path style="fill:currentColor" class="st0" d="M565.8,84.7V27.5c0-15-12.5-27.5-27.5-27.5c-15,0-27.5,12.5-27.5,27.5v55H272.5v-55c0-15-12.5-27.5-27.5-27.5
+	c-15,0-27.5,12.5-27.5,27.5v57.2c-99,9.2-147,68.2-154.4,155.8c-0.7,10.6,8.1,19.4,18.3,19.4h620.4c10.6,0,19.4-9.2,18.3-19.4
+	C712.9,152.9,664.8,93.9,565.8,84.7z"/>
+<path style="fill:currentColor" class="st0" d="M685,315H98.4c-20.2,0-36.7,16.5-36.7,36.7v225.9c0,110,55,183.3,183.3,183.3h180.8c25.3,0,42.9-24.6,34.8-48.4
+	c-7.3-21.3-13.6-44.7-13.6-61.6c0-111.1,90.6-201.7,201.7-201.7c10.6,0,21.3,0.7,31.5,2.6c22,3.3,41.8-13.9,41.8-35.9V352
+	C721.7,331.5,705.2,315,685,315z M289.4,603.5c-7,6.6-16.5,10.6-26,10.6c-4.8,0-9.5-1.1-13.9-2.9c-4.4-1.8-8.4-4.4-12.1-7.7
+	c-6.6-7-10.6-16.1-10.6-26c0-4.8,1.1-9.5,2.9-13.9c1.8-4.8,4.4-8.4,7.7-12.1c3.7-3.3,7.7-5.9,12.1-7.7c13.2-5.9,29.7-2.6,40,7.7
+	c3.3,3.7,5.9,7.3,7.7,12.1c1.8,4.4,2.9,9.2,2.9,13.9C300,587.4,296,596.5,289.4,603.5z M289.4,475.2c-7,6.6-16.5,10.6-26,10.6
+	c-4.8,0-9.5-0.7-13.9-2.9c-4.4-1.8-8.4-4.4-12.1-7.7c-6.6-7-10.6-16.5-10.6-26c0-4.8,1.1-9.5,2.9-13.9c1.8-4.4,4.4-8.4,7.7-12.1
+	c3.7-3.3,7.7-5.9,12.1-7.7c13.2-5.5,29.7-2.6,40,7.7c3.3,3.7,5.9,7.7,7.7,12.1c1.8,4.4,2.9,9.2,2.9,13.9
+	C300,458.7,296,468.2,289.4,475.2z M425.4,463.1c-1.8,4.4-4.4,8.4-7.7,12.1c-3.7,3.3-7.7,5.9-12.1,7.7c-4.4,2.2-9.2,2.9-13.9,2.9
+	c-9.5,0-19.1-4-26-10.6c-3.3-3.7-5.9-7.7-7.7-12.1c-1.8-4.4-2.9-9.2-2.9-13.9c0-9.5,4-19.1,10.6-26c10.3-10.3,26.4-13.6,40-7.7
+	c4.4,1.8,8.4,4.4,12.1,7.7c6.6,7,10.6,16.5,10.6,26C428.3,453.9,427.6,458.7,425.4,463.1z"/>
+<path style="fill:currentColor" class="st0" d="M648.3,504.2c-81,0-146.7,65.6-146.7,146.7c0,81,65.6,146.7,146.7,146.7c81,0,146.7-65.6,146.7-146.7
+	C795,569.8,729.4,504.2,648.3,504.2z M707,710.9c-5.5,5.5-12.5,8.1-19.4,8.1s-13.9-2.6-19.4-8.1l-19.4-19.4l-20.2,20.2
+	c-5.5,5.5-12.5,8.1-19.4,8.1c-7,0-13.9-2.6-19.4-8.1c-10.6-10.6-10.6-28.2,0-38.9l20.2-20.2l-19.4-19.4c-10.6-10.6-10.6-28.2,0-38.9
+	c10.6-10.6,28.2-10.6,38.9,0l19.4,19.8l18.3-18.3c10.6-10.6,28.2-10.6,38.9,0c10.6,10.6,10.6,28.2,0,38.9L687.6,653l19.4,19.4
+	C717.6,683.1,717.6,700.3,707,710.9z"/>
+</svg>`,
+};
+
+export const oxdHoliday: icon = {
+  name: 'oxd-holiday',
+  value: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 800"  xml:space="preserve">
+<path style="fill:currentColor" class="st0" d="M601.3,565c-13.9,13.9-36.2,13.9-50.2,0c-33.5-33.5-92-33.5-125.4,0c-13.9,13.9-36.2,13.9-50.2,0
+	c-33.5-33.5-92-33.5-125.4,0c-13.9,13.9-36.2,13.9-50.2,0c-33.5-33.5-92-33.5-125.4,0c-11.2,11.2-11.2,27.9,0,39
+	c11.2,11.2,27.9,11.2,39,0c13.9-13.9,36.2-13.9,50.2,0c33.5,33.5,92,33.5,125.4,0c13.9-13.9,36.2-13.9,50.2,0
+	c33.5,33.5,92,33.5,125.4,0c13.9-13.9,36.2-13.9,50.2,0c16.7,16.7,39,25.1,64.1,25.1s44.6-8.4,64.1-25.1c13.9-13.9,36.2-13.9,50.2,0
+	c11.2,11.2,27.9,11.2,39,0c11.2-11.2,11.2-27.9,0-39C690.5,531.5,634.7,531.5,601.3,565z"/>
+<path style="fill:currentColor" class="st0" d="M643.1,673.7c-19.5,13.9-50.2,13.9-69.7,0c-39-30.7-100.4-30.7-139.4,0c-19.5,13.9-50.2,13.9-69.7,0
+	c-39-30.7-100.4-30.7-139.4,0c-19.5,13.9-50.2,13.9-69.7,0c-39-30.7-100.4-30.7-139.4,0c-11.2,8.4-13.9,27.9-2.8,39
+	c8.4,11.2,27.9,13.9,39,2.8c19.5-13.9,50.2-13.9,69.7,0c19.5,16.7,44.6,22.3,69.7,22.3s50.2-8.4,69.7-22.3s50.2-13.9,69.7,0
+	c39,30.7,100.4,30.7,139.4,0c19.5-13.9,50.2-13.9,69.7,0c39,30.7,100.4,30.7,139.4,0c19.5-13.9,50.2-13.9,69.7,0
+	c11.2,8.4,30.7,8.4,39-2.8c8.4-11.2,8.4-30.7-2.8-39C740.7,643,682.1,643,643.1,673.7z"/>
+<path style="fill:currentColor" class="st0" d="M400.6,152.4c16.7,0,27.9-11.2,27.9-27.9V40.9c0-16.7-11.2-27.9-27.9-27.9c-16.7,0-27.9,11.2-27.9,27.9v83.6
+	C372.7,141.3,383.8,152.4,400.6,152.4z"/>
+<path style="fill:currentColor" class="st0" d="M183.1,224.9c5.6,5.6,13.9,8.4,19.5,8.4c5.6,0,13.9-2.8,19.5-8.4c11.2-11.2,11.2-27.9,0-39l-58.5-58.5
+	c-11.2-11.2-27.9-11.2-39,0s-11.2,27.9,0,39L183.1,224.9z"/>
+<path style="fill:currentColor" class="st0" d="M38.2,431.2h83.6c16.7,0,27.9-11.2,27.9-27.9c0-16.7-11.2-27.9-27.9-27.9H38.2c-16.7,0-27.9,11.2-27.9,27.9
+	C10.3,420,21.5,431.2,38.2,431.2z"/>
+<path style="fill:currentColor" class="st0" d="M651.4,403.3c0,16.7,11.2,27.9,27.9,27.9H763c16.7,0,27.9-11.2,27.9-27.9c0-16.7-11.2-27.9-27.9-27.9h-83.6
+	C662.6,375.4,651.4,386.6,651.4,403.3z"/>
+<path style="fill:currentColor" class="st0" d="M598.5,233.3c8.4,0,13.9-2.8,19.5-8.4l58.5-58.5c11.2-11.2,11.2-27.9,0-39s-27.9-11.2-39,0L579,185.9
+	c-11.2,11.2-11.2,27.9,0,39C584.5,230.5,590.1,233.3,598.5,233.3z"/>
+<path style="fill:currentColor" class="st0" d="M199.9,498.1c2.8,11.2,13.9,16.7,25.1,16.7h351.2c11.2,0,19.5-5.6,25.1-16.7c13.9-30.7,22.3-61.3,22.3-94.8
+	c0-122.7-100.4-223-223-223s-223,100.4-223,223C177.6,436.8,185.9,467.4,199.9,498.1z"/>
+</svg>`,
+};
+
+export const oxdDisabledURL: icon = {
+  name: 'oxd-disabled-url',
+  value: `<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
+<path style="fill:currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M41.8326 54.8565L2.67248 15.8011L15.5168 3L197.328 184.199L184.483 197L96.2367 109.05H54.5405V90.9224H78.0475L59.8855 72.8215H45.4595C30.4063 72.8215 18.1893 84.9975 18.1893 100C18.1893 115.003 30.4063 127.178 45.4595 127.178H81.8107V145.307H45.4595C20.3709 145.307 0 125.004 0 100C0 76.1916 18.4347 56.6775 41.8326 54.8565ZM177.529 139.083L163.921 125.521C174.366 121.716 181.811 111.714 181.811 100C181.811 84.9975 169.594 72.8215 154.541 72.8215H118.189V54.6935H154.541C179.629 54.6935 200 74.9686 200 100C200 116.66 190.974 131.228 177.529 139.083Z" />
+</svg>`,
+};
+
+export const oxdGenerateLink: icon = {
+  name: 'oxd-generate-link',
+  value: `<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
+<path style="fill:currentColor" d="M40.6544 82.7018L15.8734 107.483C-5.29115 128.647 -5.29115 162.962 15.8734 184.127C37.038 205.291 71.3526 205.291 92.5172 184.127L125.548 151.096C146.712 129.931 146.712 95.6167 125.548 74.4521C121.069 69.9731 116.001 66.442 110.593 63.8587L100 74.4521C98.8984 75.5537 97.9688 76.7621 97.2113 78.0441C102.91 79.6769 108.285 82.7375 112.774 87.226C126.884 101.336 126.884 124.212 112.774 138.322L79.7432 171.353C65.6335 185.462 42.7571 185.462 28.6474 171.353C14.5377 157.243 14.5377 134.366 28.6474 120.257L42.9659 105.938C40.9391 98.3487 40.1686 90.4934 40.6544 82.7018Z" />
+<path style="fill:currentColor" d="M74.4521 48.9042C53.2875 70.0687 53.2875 104.383 74.4521 125.548C78.9311 130.027 83.999 133.558 89.4066 136.141L103.418 122.13C97.4863 120.546 91.8794 117.427 87.226 112.774C73.1163 98.6642 73.1163 75.7879 87.226 61.6782L120.257 28.6474C134.366 14.5377 157.243 14.5377 171.353 28.6474C185.462 42.7571 185.462 65.6335 171.353 79.7432L157.034 94.0618C159.061 101.651 159.831 109.507 159.346 117.298L184.127 92.5172C205.291 71.3526 205.291 37.038 184.127 15.8734C162.962 -5.29115 128.647 -5.29114 107.483 15.8734L74.4521 48.9042Z" />
+<path style="fill:currentColor" d="M182.212 155.293C182.212 167.828 172.05 177.989 159.515 177.989C146.981 177.989 136.819 167.828 136.819 155.293C136.819 142.758 146.981 132.597 159.515 132.597C172.05 132.597 182.212 142.758 182.212 155.293Z" fill="#61738E"/>
+<path style="fill:currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M168.14 146.47C163.324 141.66 155.516 141.66 150.7 146.47C145.884 151.279 145.884 159.077 150.7 163.887C155.516 168.696 163.324 168.696 168.14 163.887C169.44 162.588 170.387 161.075 170.985 159.463C171.222 158.825 171.931 158.499 172.57 158.735C173.208 158.972 173.534 159.68 173.298 160.318C172.579 162.257 171.44 164.074 169.884 165.628C164.105 171.4 154.735 171.4 148.956 165.628C143.177 159.857 143.177 150.499 148.956 144.728C154.735 138.956 164.105 138.956 169.884 144.728L168.14 146.47Z" fill="white"/>
+<path style="fill:currentColor" d="M165.583 149.023L172.441 142.174C172.811 141.805 173.444 142.034 173.491 142.554L174.177 150.088C174.212 150.471 173.891 150.792 173.507 150.757L165.963 150.072C165.442 150.025 165.213 149.393 165.583 149.023Z" fill="white"/>
+<path style="fill:currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M168.14 146.47C163.324 141.66 155.516 141.66 150.7 146.47C145.884 151.279 145.884 159.077 150.7 163.887C155.516 168.696 163.324 168.696 168.14 163.887C169.44 162.588 170.387 161.075 170.985 159.463C171.222 158.825 171.931 158.499 172.57 158.735C173.208 158.972 173.534 159.68 173.298 160.318C172.579 162.257 171.44 164.074 169.884 165.628C164.105 171.4 154.735 171.4 148.956 165.628C143.177 159.857 143.177 150.499 148.956 144.728C154.735 138.956 164.105 138.956 169.884 144.728L168.14 146.47Z" stroke="white"/>
+<path style="fill:currentColor" d="M165.583 149.023L172.441 142.174C172.811 141.805 173.444 142.034 173.491 142.554L174.177 150.088C174.212 150.471 173.891 150.792 173.507 150.757L165.963 150.072C165.442 150.025 165.213 149.393 165.583 149.023Z" stroke="white"/>`,
+};
+
+export const oxdEnableUrl: icon = {
+  name: 'oxd-enable-url',
+  value: `<svg  viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path style="fill:currentColor" d="M112.887 72.9361L72.9531 112.87C72.0174 113.798 71.2747 114.903 70.7678 116.119C70.261 117.336 70 118.641 70 119.959C70 121.277 70.261 122.581 70.7678 123.798C71.2747 125.015 72.0174 126.119 72.9531 127.047C73.8812 127.983 74.9854 128.725 76.202 129.232C77.4186 129.739 78.7235 130 80.0414 130C81.3594 130 82.6643 129.739 83.8809 129.232C85.0975 128.725 86.2016 127.983 87.1297 127.047L127.064 87.1127C128.944 85.2328 130 82.683 130 80.0244C130 77.3658 128.944 74.816 127.064 72.9361C125.184 71.0561 122.634 70 119.976 70C117.317 70 114.767 71.0561 112.887 72.9361Z" fill="#64728C"/>
+<path style="fill:currentColor" d="M102.839 154.02L90.0237 166.714C82.8294 174.114 73.1581 178.612 62.8545 179.35C52.5508 180.087 42.3357 177.012 34.1577 170.712C29.8353 167.156 26.308 162.735 23.8038 157.733C21.2996 152.732 19.8741 147.262 19.6193 141.676C19.3646 136.091 20.2863 130.514 22.3249 125.306C24.3635 120.098 27.4736 115.375 31.4545 111.442L45.6713 97.1492C46.6097 96.2201 47.3545 95.1146 47.8628 93.8967C48.3711 92.6787 48.6327 91.3723 48.6327 90.0529C48.6327 88.7334 48.3711 87.427 47.8628 86.209C47.3545 84.9911 46.6097 83.8856 45.6713 82.9565C44.7405 82.0197 43.6332 81.2761 42.4132 80.7687C41.1931 80.2613 39.8845 80 38.5629 80C37.2412 80 35.9326 80.2613 34.7125 80.7687C33.4925 81.2761 32.3852 82.0197 31.4545 82.9565L18.7394 95.7499C8.02837 106.105 1.44487 119.988 0.211218 134.822C-1.02243 149.656 3.17759 164.432 12.0315 176.409C17.2865 183.215 23.932 188.826 31.5264 192.871C39.1209 196.916 47.4905 199.301 56.0794 199.868C64.6682 200.435 73.2796 199.171 81.3416 196.161C89.4036 193.15 96.7316 188.461 102.839 182.406L117.056 168.213C118.941 166.331 120 163.778 120 161.117C120 158.455 118.941 155.902 117.056 154.02C115.17 152.138 112.613 151.081 109.947 151.081C107.281 151.081 104.724 152.138 102.839 154.02Z" fill="#64728C"/>
+<path style="fill:currentColor" d="M176.48 12.1475C164.429 3.20435 149.541 -1.03714 134.596 0.215335C119.652 1.46781 105.674 8.12857 95.2732 18.9535L84.4855 29.9631C83.2526 30.8613 82.2215 32.0089 81.4592 33.3316C80.6969 34.6544 80.2203 36.1228 80.0602 37.6418C79.9001 39.1608 80.0602 40.6966 80.53 42.1497C80.9998 43.6028 81.7689 44.9409 82.7875 46.0773C83.7161 47.0154 84.8208 47.76 86.038 48.2681C87.2552 48.7762 88.5607 49.0378 89.8794 49.0378C91.198 49.0378 92.5035 48.7762 93.7207 48.2681C94.9379 47.76 96.0426 47.0154 96.9712 46.0773L109.956 32.9658C117.094 25.5224 126.731 20.9936 137.007 20.2542C147.282 19.5148 157.466 22.6173 165.592 28.9623C169.937 32.5234 173.484 36.9618 176.002 41.9883C178.52 47.0148 179.953 52.5166 180.208 58.1351C180.462 63.7536 179.532 69.3628 177.479 74.5972C175.425 79.8316 172.294 84.5737 168.289 88.5144L154.106 102.827C153.169 103.757 152.426 104.864 151.919 106.084C151.412 107.304 151.151 108.612 151.151 109.933C151.151 111.254 151.412 112.563 151.919 113.782C152.426 115.002 153.169 116.109 154.106 117.039C155.034 117.978 156.139 118.722 157.356 119.23C158.573 119.738 159.879 120 161.197 120C162.516 120 163.822 119.738 165.039 119.23C166.256 118.722 167.361 117.978 168.289 117.039L182.473 102.827C188.508 96.7227 193.179 89.4033 196.178 81.3536C199.177 73.3039 200.434 64.7076 199.868 56.1341C199.301 47.5606 196.923 39.2056 192.891 31.6225C188.859 24.0393 183.265 17.4011 176.48 12.1475Z" fill="#64728C"/>
+</svg>`,
+};
+
 const icons: Icons = {
   'oxd-likes': oxdLikes,
   'oxd-birthday': oxdBirthday,
@@ -2356,6 +2438,11 @@ const icons: Icons = {
   'oxd-status': oxdStatus,
   'oxd-required': oxdRequired,
   'oxd-external-link': oxdExternalLink,
+  'oxd-on-leave': oxdOnLeave,
+  'oxd-holiday': oxdHoliday,
+  'oxd-disabled-url': oxdDisabledURL,
+  'oxd-generate-link': oxdGenerateLink,
+  'oxd-enable-url': oxdEnableUrl,
 };
 
 export default icons;

From c7570028157c05bc10819e076784190cd8a2820e Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Thu, 7 Nov 2024 06:48:49 +0530
Subject: [PATCH 2/9] HT:554:Updating oxd checkbox and oxd select input
 components

---
 .../__snapshots__/checkbox.spec.ts.snap       |  1 +
 .../core/components/Input/CheckboxGroup.vue   | 12 ++++
 .../core/components/Input/CheckboxInput.vue   | 56 +++++++++++++++----
 .../components/Input/Select/SelectInput.vue   | 10 ++++
 .../__snapshots__/checkbox-group.spec.ts.snap |  2 +
 .../__snapshots__/checkbox-input.spec.ts.snap |  2 +
 .../Input/__tests__/checkbox-input.spec.ts    | 36 ++++++++++++
 .../Input/__tests__/select-input.spec.ts      | 43 ++++++++++++++
 .../core/components/Input/checkbox-input.scss | 14 +++++
 .../__snapshots__/list-table.spec.ts.snap     |  6 ++
 .../Pagination/__tests__/pagination.spec.ts   |  4 +-
 .../components/Input/CheckboxInput.stories.js | 48 +++++++++++++++-
 .../ListTable/ListSkeleton.story.vue          |  4 ++
 13 files changed, 226 insertions(+), 12 deletions(-)

diff --git a/components/src/core/components/CardTable/Cell/__tests__/__snapshots__/checkbox.spec.ts.snap b/components/src/core/components/CardTable/Cell/__tests__/__snapshots__/checkbox.spec.ts.snap
index 29dc790b..5c7c74dc 100644
--- a/components/src/core/components/CardTable/Cell/__tests__/__snapshots__/checkbox.spec.ts.snap
+++ b/components/src/core/components/CardTable/Cell/__tests__/__snapshots__/checkbox.spec.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`CardTable > Cell > Checkbox.vue should renders OXD CardTable > Cell > Checkbox Cell 1`] = `
 <div class="oxd-checkbox-wrapper"><label class="">
+    <!--v-if-->
     <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="0"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
     <div class="oxd-checkbox-option-label"></div>
     <!--v-if-->
diff --git a/components/src/core/components/Input/CheckboxGroup.vue b/components/src/core/components/Input/CheckboxGroup.vue
index 2c1ecfb1..4153045e 100644
--- a/components/src/core/components/Input/CheckboxGroup.vue
+++ b/components/src/core/components/Input/CheckboxGroup.vue
@@ -20,6 +20,9 @@ export interface Options {
   optionInfoIconStyle?: Record<string, any>;
   optionInfoIconSize?: string;
   optionInfoMessage?: string;
+  optionInfoIconPosition?: string;
+  labelPosition?: string;
+  enableBorder?: boolean;
 }
 
 export default defineComponent({
@@ -53,6 +56,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   render() {
@@ -83,6 +90,11 @@ export default defineComponent({
             optionInfoIconStyle: option.optionInfoIconStyle,
             optionInfoIconSize: option.optionInfoIconSize,
             optionInfoMessage: option.optionInfoMessage,
+            optionInfoIconPosition: option.optionInfoIconPosition,
+            labelPosition: option.labelPosition,
+            enableBorder: option.enableBorder,
+            hasError: this.hasError,
+
             onFocus: () => {
               this.$emit('focus', true);
             },
diff --git a/components/src/core/components/Input/CheckboxInput.vue b/components/src/core/components/Input/CheckboxInput.vue
index 9c7b8018..bcecc57a 100644
--- a/components/src/core/components/Input/CheckboxInput.vue
+++ b/components/src/core/components/Input/CheckboxInput.vue
@@ -1,6 +1,25 @@
 <template>
   <div :class="['oxd-checkbox-wrapper ', optionWrapperAdditionalClass]">
-    <label :class="{'--disabled': disabled}">
+    <label
+      :class="[
+        {'--disabled': disabled},
+        {
+          'border-enabled': enableBorder,
+          'border-error': hasError && enableBorder,
+        },
+      ]"
+    >
+      <template v-if="optionInfoIcon && optionInfoIconPosition === 'left'">
+        <span class="oxd-optional-info-icon oxd-optional-info-icon-left">
+          <oxd-icon
+            :name="optionInfoIcon"
+            :size="optionInfoIconSize"
+            :style="optionInfoIconStyle"
+            :tooltip="optionInfoMessage"
+            class="optional-info-icon"
+          />
+        </span>
+      </template>
       <template v-if="labelPosition === 'left'">
         <div class="oxd-checkbox-option-label">
           {{ optionLabel }}
@@ -29,15 +48,17 @@
           {{ optionLabel }}
         </div>
       </template>
-      <span class="oxd-optional-info-icon" v-if="optionInfoIcon">
-        <oxd-icon
-          class="optional-info-icon"
-          :name="optionInfoIcon"
-          :style="optionInfoIconStyle"
-          :size="optionInfoIconSize"
-          :tooltip="optionInfoMessage"
-        />
-      </span>
+      <template v-if="optionInfoIcon && optionInfoIconPosition === 'right'">
+        <span class="oxd-optional-info-icon" v-if="optionInfoIcon">
+          <oxd-icon
+            class="optional-info-icon"
+            :name="optionInfoIcon"
+            :style="optionInfoIconStyle"
+            :size="optionInfoIconSize"
+            :tooltip="optionInfoMessage"
+          />
+        </span>
+      </template>
     </label>
   </div>
 </template>
@@ -111,6 +132,21 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    optionInfoIconPosition: {
+      type: String,
+      default: RIGHT,
+      validator: function(value: Position) {
+        return LABEL_POSITIONS.indexOf(value) !== -1;
+      },
+    },
+    enableBorder: {
+      type: Boolean,
+      default: false,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ['update:modelValue', 'blur', 'focus', 'change'],
diff --git a/components/src/core/components/Input/Select/SelectInput.vue b/components/src/core/components/Input/Select/SelectInput.vue
index 2527a409..3a077ce7 100644
--- a/components/src/core/components/Input/Select/SelectInput.vue
+++ b/components/src/core/components/Input/Select/SelectInput.vue
@@ -41,6 +41,14 @@
         :ref="`option-${i}`"
         @select="onSelect(option)"
       >
+        <oxd-icon
+          v-if="option.icon"
+          :name="option.icon"
+          :size="option.iconSize"
+          :style="option.iconStyle"
+          :tooltip="option.message"
+          class="optional-select-icon"
+        />
         <slot name="option" :data="option"></slot>
         <span v-if="!$slots['option']">{{ $vt(option.label) }}</span>
       </oxd-select-option>
@@ -58,6 +66,7 @@ import SelectDropdown from '@orangehrm/oxd/core/components/Input/Select/SelectDr
 import SelectOption from '@orangehrm/oxd/core/components/Input/Select/SelectOption.vue';
 import translateMixin from '../../../../mixins/translate';
 import dropdownDirectionDirective from '../../../../directives/dropdown-direction';
+import Icon from '@orangehrm/oxd/core/components/Icon/Icon.vue';
 
 export default defineComponent({
   name: 'oxd-select-input',
@@ -67,6 +76,7 @@ export default defineComponent({
     'oxd-select-text': SelectText,
     'oxd-select-dropdown': SelectDropdown,
     'oxd-select-option': SelectOption,
+    'oxd-icon': Icon,
   },
 
   directives: {
diff --git a/components/src/core/components/Input/__tests__/__snapshots__/checkbox-group.spec.ts.snap b/components/src/core/components/Input/__tests__/__snapshots__/checkbox-group.spec.ts.snap
index 30ee2d69..b03a781b 100644
--- a/components/src/core/components/Input/__tests__/__snapshots__/checkbox-group.spec.ts.snap
+++ b/components/src/core/components/Input/__tests__/__snapshots__/checkbox-group.spec.ts.snap
@@ -9,11 +9,13 @@ exports[`CheckboxGroup > CheckboxGroup.vue renders OXD CheckboxGroup 1`] = `
   </div>
   <div class="check-box-column">
     <div class="oxd-checkbox-wrapper"><label class="">
+        <!--v-if-->
         <!--v-if--><input type="checkbox" true-value="true" false-value="false" id="check-box-group-id_1" value="1"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
         <div class="oxd-checkbox-option-label">Item one</div>
         <!--v-if-->
       </label></div>
     <div class="oxd-checkbox-wrapper"><label class="">
+        <!--v-if-->
         <!--v-if--><input type="checkbox" true-value="true" false-value="false" id="check-box-group-id_2" value="2"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
         <div class="oxd-checkbox-option-label">Item two</div>
         <!--v-if-->
diff --git a/components/src/core/components/Input/__tests__/__snapshots__/checkbox-input.spec.ts.snap b/components/src/core/components/Input/__tests__/__snapshots__/checkbox-input.spec.ts.snap
index 3a2a5b5a..53d67756 100644
--- a/components/src/core/components/Input/__tests__/__snapshots__/checkbox-input.spec.ts.snap
+++ b/components/src/core/components/Input/__tests__/__snapshots__/checkbox-input.spec.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`CheckboxInput.vue renders OXD Checkbox Input 1`] = `
 <div class="oxd-checkbox-wrapper"><label class="">
+    <!--v-if-->
     <!--v-if--><input type="checkbox" true-value="true" false-value="false" label="Checkbox"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
     <div class="oxd-checkbox-option-label"></div>
     <!--v-if-->
@@ -10,6 +11,7 @@ exports[`CheckboxInput.vue renders OXD Checkbox Input 1`] = `
 
 exports[`CheckboxInput.vue should renders OXD Checkbox with string values 1`] = `
 <div class="oxd-checkbox-wrapper"><label class="">
+    <!--v-if-->
     <!--v-if--><input type="checkbox" true-value="testtrue" false-value="testfalse"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
     <div class="oxd-checkbox-option-label"></div>
     <!--v-if-->
diff --git a/components/src/core/components/Input/__tests__/checkbox-input.spec.ts b/components/src/core/components/Input/__tests__/checkbox-input.spec.ts
index d15a48a0..29589143 100644
--- a/components/src/core/components/Input/__tests__/checkbox-input.spec.ts
+++ b/components/src/core/components/Input/__tests__/checkbox-input.spec.ts
@@ -74,4 +74,40 @@ describe('CheckboxInput.vue', () => {
     const optionalInfoIcon = wrapper.find('.oxd-optional-info-icon');
     expect(optionalInfoIcon.exists()).toBe(true);
   });
+
+  it('should render border when optionBorder is provided', () => {
+    const wrapper = mount(CheckboxInput, {
+      props: {
+        enableBorder: true,
+      },
+    });
+    const border = wrapper.find('.border-enabled');
+    expect(border.exists()).toBe(true);
+  });
+
+  it('if optionInfoIconPosition is left, should render info icon at left', () => {
+    const wrapper = mount(CheckboxInput, {
+      props: {
+        optionInfoIcon: 'info-icon',
+        optionInfoMessage: 'This is additional information',
+        optionInfoIconStyle: {color: 'blue'},
+        optionInfoIconSize: 'small',
+        optionInfoIconPosition: 'left',
+      },
+    });
+    const optionalInfoIcon = wrapper.find('.oxd-optional-info-icon');
+    expect(optionalInfoIcon.exists()).toBe(true);
+    expect(optionalInfoIcon.classes()).toContain('oxd-optional-info-icon-left');
+  });
+
+  it('if hasError is true, border should be red', () => {
+    const wrapper = mount(CheckboxInput, {
+      props: {
+        enableBorder: true,
+        hasError: true,
+      },
+    });
+    const border = wrapper.find('.border-enabled');
+    expect(border.classes()).toContain('border-error');
+  });
 });
diff --git a/components/src/core/components/Input/__tests__/select-input.spec.ts b/components/src/core/components/Input/__tests__/select-input.spec.ts
index 64631641..da54b455 100644
--- a/components/src/core/components/Input/__tests__/select-input.spec.ts
+++ b/components/src/core/components/Input/__tests__/select-input.spec.ts
@@ -306,4 +306,47 @@ describe('SelectInput.vue', () => {
     await wrapper.vm.$nextTick();
     expect(iconButton.props('name')).toBe(dropdownTriggerCloseIcon);
   });
+
+  it('when icon attribute is provide, icon should be appera on option list', async () => {
+    const options = [
+      {
+        id: 1,
+        label: 'HR Admin',
+        icon: 'eye-fill',
+        iconStyle: {
+          marginRight: '5px',
+        },
+      },
+      {
+        id: 2,
+        label: 'ESS User',
+      },
+      {
+        id: 3,
+        label: 'Supervisor',
+      },
+    ];
+    const wrapper = mount(SelectInput, {
+      props: {
+        options,
+      },
+    });
+    wrapper.findComponent(SelectText).trigger('click');
+    await wrapper.vm.$nextTick();
+    const nodes = wrapper.findAllComponents(SelectOption);
+    await nodes[0].trigger('mousedown');
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      [
+        {
+          _selected: false,
+          icon: 'eye-fill',
+          iconStyle: {
+            marginRight: '5px',
+          },
+          id: 1,
+          label: 'HR Admin',
+        },
+      ],
+    ]);
+  });
 });
diff --git a/components/src/core/components/Input/checkbox-input.scss b/components/src/core/components/Input/checkbox-input.scss
index 09406fc9..76ccfc77 100644
--- a/components/src/core/components/Input/checkbox-input.scss
+++ b/components/src/core/components/Input/checkbox-input.scss
@@ -2,6 +2,20 @@
 @import 'variables';
 
 .oxd-checkbox-wrapper {
+
+  .border-enabled {
+    border: 1px solid #ccc;
+    padding: 8px;
+    border-radius: 10px;
+  }
+
+  .border-error {
+    border: 1px solid #ff4e00;
+    box-shadow: 0 0 5px 0.2rem rgba(223, 9, 16, 0.1);
+    padding: 8px;
+    border-radius: 10px;
+  }
+  
   .oxd-checkbox-option-label {
     overflow-wrap: break-word;
     word-break: break-all;
diff --git a/components/src/core/components/ListTable/__tests__/__snapshots__/list-table.spec.ts.snap b/components/src/core/components/ListTable/__tests__/__snapshots__/list-table.spec.ts.snap
index 754ea568..b301a685 100644
--- a/components/src/core/components/ListTable/__tests__/__snapshots__/list-table.spec.ts.snap
+++ b/components/src/core/components/ListTable/__tests__/__snapshots__/list-table.spec.ts.snap
@@ -6,6 +6,7 @@ exports[`ListTable > ListTable.vue renders OXD ListTable > ListTable 1`] = `
     <div class="oxd-table-row oxd-table-row--with-border" role="row">
       <div class="oxd-table-header-cell oxd-padding-cell oxd-table-th" role="columnheader">
         <div class="oxd-checkbox-wrapper"><label class="">
+            <!--v-if-->
             <!--v-if--><input type="checkbox" true-value="true" false-value="false"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
             <div class="oxd-checkbox-option-label"></div>
             <!--v-if-->
@@ -25,6 +26,7 @@ exports[`ListTable > ListTable.vue renders OXD ListTable > ListTable 1`] = `
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
         <div class="oxd-table-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
+              <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="0"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
               <div class="oxd-checkbox-option-label"></div>
               <!--v-if-->
@@ -42,6 +44,7 @@ exports[`ListTable > ListTable.vue renders OXD ListTable > ListTable 1`] = `
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
         <div class="oxd-table-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
+              <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="1"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
               <div class="oxd-checkbox-option-label"></div>
               <!--v-if-->
@@ -65,6 +68,7 @@ exports[`ListTable > ListTable.vue should render OXD ListTable without selectabl
     <div class="oxd-table-row oxd-table-row--with-border" role="row">
       <div class="oxd-table-header-cell oxd-padding-cell oxd-table-th" role="columnheader">
         <div class="oxd-checkbox-wrapper"><label class="">
+            <!--v-if-->
             <!--v-if--><input type="checkbox" true-value="true" false-value="false"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
             <div class="oxd-checkbox-option-label"></div>
             <!--v-if-->
@@ -84,6 +88,7 @@ exports[`ListTable > ListTable.vue should render OXD ListTable without selectabl
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
         <div class="oxd-table-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
+              <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="0"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
               <div class="oxd-checkbox-option-label"></div>
               <!--v-if-->
@@ -101,6 +106,7 @@ exports[`ListTable > ListTable.vue should render OXD ListTable without selectabl
       <div class="oxd-table-row oxd-table-row--with-border" role="row">
         <div class="oxd-table-cell oxd-padding-cell" role="cell">
           <div class="oxd-checkbox-wrapper"><label class="">
+              <!--v-if-->
               <!--v-if--><input type="checkbox" true-value="true" false-value="false" value="1"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
               <div class="oxd-checkbox-option-label"></div>
               <!--v-if-->
diff --git a/components/src/core/components/Pagination/__tests__/pagination.spec.ts b/components/src/core/components/Pagination/__tests__/pagination.spec.ts
index fd7878ac..53dc4986 100644
--- a/components/src/core/components/Pagination/__tests__/pagination.spec.ts
+++ b/components/src/core/components/Pagination/__tests__/pagination.spec.ts
@@ -27,7 +27,9 @@ describe('Pageination.vue', () => {
         )
         .html(),
     ).toEqual(
-      '<div role="option" class="oxd-select-option --selected"><span>50</span></div>',
+      `<div role="option" class="oxd-select-option --selected">
+  <!--v-if--><span>50</span>
+</div>`,
     );
   });
   it('shows the first separator when first page is missing and pageItems starts from 3 or higher', async () => {
diff --git a/storybook/stories/core/components/Input/CheckboxInput.stories.js b/storybook/stories/core/components/Input/CheckboxInput.stories.js
index 9d9f3aa6..d8c85439 100644
--- a/storybook/stories/core/components/Input/CheckboxInput.stories.js
+++ b/storybook/stories/core/components/Input/CheckboxInput.stories.js
@@ -34,7 +34,7 @@ export default {
       },
     },
     checkIcon: {
-      control: {type: 'boolean'},
+      control: {type: 'string'},
       table: {
         type: {summary: 'Set icon to be display in the  checkbox'},
       },
@@ -70,6 +70,18 @@ export default {
         type: {summary: 'Set label position for checkbox label'},
       },
     },
+    enableBorder: {
+      control: {type: 'boolean'},
+      table: {
+        type: {summary: 'Set border for the checkbox'},
+      },
+    },
+    optionInfoIcon:{
+      control: {type: 'text'},
+      table: {
+        type: {summary: 'Set icon to be display in the  checkbox'},
+      },
+    },
     blur: {
       control: {type: 'function'},
       table: {
@@ -204,6 +216,40 @@ Colored.parameters = {
   },
 };
 
+export const OptionInfoIcon = Template.bind({
+  optionInfoIcon: 'oxd-eye',
+});
+
+OptionInfoIcon.parameters = {
+  docs: {
+    source: {
+      code: `<div>
+  <oxd-checkbox-input optionInfoIcon="oxd-eye"  />
+  <br/>
+  <span>{{selected}}</span>
+</div>`,
+    },
+  },
+};
+
+export const EnableBorder= Template.bind({
+  optionLabel: 'check this!',
+  enableBorder: true,
+
+});
+
+EnableBorder.parameters = {
+  docs: {
+    source: {
+      code: `<div>
+  <oxd-checkbox-input :enableBorder="true"  optionLabel="Check this!"/>
+  <br/>
+  <span>{{selected}}</span>
+</div>`,
+    },
+  },  
+};
+
 export const VmodelSingleDefault = VmodelSample.bind({});
 
 VmodelSingleDefault.parameters = {
diff --git a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
index d15b27d7..37b7c4db 100644
--- a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
+++ b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
@@ -140,6 +140,10 @@ export default {
             {
               id: 1,
               label: 'HR Admin',
+              icon: 'eye-fill',
+              iconStyle:{
+                marginRight: '5px',
+              },
             },
             {
               id: 2,

From 3f8ad31f2e3e28741c9f9450189f2c1af686d6dd Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Thu, 7 Nov 2024 06:52:10 +0530
Subject: [PATCH 3/9] HT-554:Update changelog.md file

---
 changelog.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/changelog.md b/changelog.md
index 8cd22c37..e848137a 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,5 @@
+2024-11-07 - 30e71393cff4e116c842c56bf35ef84bd659448d - Update OXD CheckBox/SelectInput Component
+
 2024-11-01 - d9cb67f8abf3c1128203f14bce687c8b5b4075a6 - Remove unnecessary separator between consecutive page numbers in OXD pagination
 
 2024-11-01 - 5f4c5306a8ec4b497cb824fa673e50ac0162af4b - ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick event to prevent default behaviour of link and execute a function fix issue

From 70d3cb35977243558525fe966c4f51d519d38339 Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Sat, 9 Nov 2024 21:06:41 +0530
Subject: [PATCH 4/9] HT-554:Fix issues

---
 .../components/Input/Select/SelectInput.vue   | 10 -----
 .../Input/__tests__/select-input.spec.ts      | 43 -------------------
 .../Pagination/__tests__/pagination.spec.ts   |  4 +-
 .../components/Input/SelectInput.stories.js   | 16 +++++++
 .../Input/SelectInputCustomSelect.story.vue   | 39 +++++++++++++++++
 .../ListTable/ListSkeleton.story.vue          |  4 --
 6 files changed, 56 insertions(+), 60 deletions(-)
 create mode 100644 storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue

diff --git a/components/src/core/components/Input/Select/SelectInput.vue b/components/src/core/components/Input/Select/SelectInput.vue
index 3a077ce7..2527a409 100644
--- a/components/src/core/components/Input/Select/SelectInput.vue
+++ b/components/src/core/components/Input/Select/SelectInput.vue
@@ -41,14 +41,6 @@
         :ref="`option-${i}`"
         @select="onSelect(option)"
       >
-        <oxd-icon
-          v-if="option.icon"
-          :name="option.icon"
-          :size="option.iconSize"
-          :style="option.iconStyle"
-          :tooltip="option.message"
-          class="optional-select-icon"
-        />
         <slot name="option" :data="option"></slot>
         <span v-if="!$slots['option']">{{ $vt(option.label) }}</span>
       </oxd-select-option>
@@ -66,7 +58,6 @@ import SelectDropdown from '@orangehrm/oxd/core/components/Input/Select/SelectDr
 import SelectOption from '@orangehrm/oxd/core/components/Input/Select/SelectOption.vue';
 import translateMixin from '../../../../mixins/translate';
 import dropdownDirectionDirective from '../../../../directives/dropdown-direction';
-import Icon from '@orangehrm/oxd/core/components/Icon/Icon.vue';
 
 export default defineComponent({
   name: 'oxd-select-input',
@@ -76,7 +67,6 @@ export default defineComponent({
     'oxd-select-text': SelectText,
     'oxd-select-dropdown': SelectDropdown,
     'oxd-select-option': SelectOption,
-    'oxd-icon': Icon,
   },
 
   directives: {
diff --git a/components/src/core/components/Input/__tests__/select-input.spec.ts b/components/src/core/components/Input/__tests__/select-input.spec.ts
index da54b455..64631641 100644
--- a/components/src/core/components/Input/__tests__/select-input.spec.ts
+++ b/components/src/core/components/Input/__tests__/select-input.spec.ts
@@ -306,47 +306,4 @@ describe('SelectInput.vue', () => {
     await wrapper.vm.$nextTick();
     expect(iconButton.props('name')).toBe(dropdownTriggerCloseIcon);
   });
-
-  it('when icon attribute is provide, icon should be appera on option list', async () => {
-    const options = [
-      {
-        id: 1,
-        label: 'HR Admin',
-        icon: 'eye-fill',
-        iconStyle: {
-          marginRight: '5px',
-        },
-      },
-      {
-        id: 2,
-        label: 'ESS User',
-      },
-      {
-        id: 3,
-        label: 'Supervisor',
-      },
-    ];
-    const wrapper = mount(SelectInput, {
-      props: {
-        options,
-      },
-    });
-    wrapper.findComponent(SelectText).trigger('click');
-    await wrapper.vm.$nextTick();
-    const nodes = wrapper.findAllComponents(SelectOption);
-    await nodes[0].trigger('mousedown');
-    expect(wrapper.emitted('update:modelValue')).toEqual([
-      [
-        {
-          _selected: false,
-          icon: 'eye-fill',
-          iconStyle: {
-            marginRight: '5px',
-          },
-          id: 1,
-          label: 'HR Admin',
-        },
-      ],
-    ]);
-  });
 });
diff --git a/components/src/core/components/Pagination/__tests__/pagination.spec.ts b/components/src/core/components/Pagination/__tests__/pagination.spec.ts
index 53dc4986..e984d551 100644
--- a/components/src/core/components/Pagination/__tests__/pagination.spec.ts
+++ b/components/src/core/components/Pagination/__tests__/pagination.spec.ts
@@ -27,9 +27,7 @@ describe('Pageination.vue', () => {
         )
         .html(),
     ).toEqual(
-      `<div role="option" class="oxd-select-option --selected">
-  <!--v-if--><span>50</span>
-</div>`,
+      `<div role="option" class="oxd-select-option --selected"><span>50</span></div>`,
     );
   });
   it('shows the first separator when first page is missing and pageItems starts from 3 or higher', async () => {
diff --git a/storybook/stories/core/components/Input/SelectInput.stories.js b/storybook/stories/core/components/Input/SelectInput.stories.js
index 84b6d7fe..7fcc33a4 100644
--- a/storybook/stories/core/components/Input/SelectInput.stories.js
+++ b/storybook/stories/core/components/Input/SelectInput.stories.js
@@ -2,6 +2,7 @@ import SelectInput from '@orangehrm/oxd/core/components/Input/Select/SelectInput
 import SelectInputEvents from './SelectInputEvents.story.vue';
 import SelectInputAfterSelect from './SelectInputAfterSelect.story.vue';
 import {h, ref} from 'vue';
+import SelectInputCustomSelectStory from './SelectInputCustomSelect.story.vue';
 
 export default {
   title: 'Inputs/SelectInput',
@@ -330,6 +331,21 @@ Loading.parameters = {
   },
 };
 
+export const CustomTemplate = () => SelectInputCustomSelectStory;
+
+CustomTemplate.parameters = {
+  docs: {
+    source: {
+      code:
+      ' <oxd-select :options="options" v-model="value">\n' +
+        '<template v-slot:option> (Github ID) </template> \n' +
+        '</oxd-select>"\n' +
+        '//\n' +
+        'File -> SelectInputCustomSelect.story.vue',
+    },
+  },
+};
+
 export const Events = () => SelectInputEvents;
 
 Events.parameters = {
diff --git a/storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue b/storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue
new file mode 100644
index 00000000..54d1dd95
--- /dev/null
+++ b/storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue
@@ -0,0 +1,39 @@
+<template>
+    <oxd-select :options="options" v-model="value">
+      <template v-slot:option="{data}"> 
+        <oxd-icon name="eye-fill" /> 
+          <span >{{ data.label }}</span>
+         </template>
+    </oxd-select>
+  </template>
+  
+  <script>
+  import SelectInput from '@orangehrm/oxd/core/components/Input/Select/SelectInput';
+  import Icon from '@orangehrm/oxd/core/components/Icon/Icon.vue';
+  
+  export default {
+    data() {
+      return {
+        value: '',
+        options: [
+          {id: 1, label: 'HR Admin'},
+          {id: 2, label: 'ESS User'},
+          {id: 3, label: 'Supervisor'},
+          {
+            id: 5,
+            label: 'Employee',
+          },
+          {
+            id: 6,
+            label: 'Assistant Manager',
+          },
+        ],
+      };
+    },
+  
+    components: {
+      'oxd-select': SelectInput,
+      'oxd-icon': Icon,
+    },
+  };
+  </script>
\ No newline at end of file
diff --git a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
index 37b7c4db..d15b27d7 100644
--- a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
+++ b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
@@ -140,10 +140,6 @@ export default {
             {
               id: 1,
               label: 'HR Admin',
-              icon: 'eye-fill',
-              iconStyle:{
-                marginRight: '5px',
-              },
             },
             {
               id: 2,

From 745a7d536d301dc6fe2bb148ff9c85a5d62b1dde Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Sat, 9 Nov 2024 21:09:03 +0530
Subject: [PATCH 5/9] HT-554:FIxed lint issues

---
 .../src/core/components/Pagination/__tests__/pagination.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/core/components/Pagination/__tests__/pagination.spec.ts b/components/src/core/components/Pagination/__tests__/pagination.spec.ts
index e984d551..fd7878ac 100644
--- a/components/src/core/components/Pagination/__tests__/pagination.spec.ts
+++ b/components/src/core/components/Pagination/__tests__/pagination.spec.ts
@@ -27,7 +27,7 @@ describe('Pageination.vue', () => {
         )
         .html(),
     ).toEqual(
-      `<div role="option" class="oxd-select-option --selected"><span>50</span></div>`,
+      '<div role="option" class="oxd-select-option --selected"><span>50</span></div>',
     );
   });
   it('shows the first separator when first page is missing and pageItems starts from 3 or higher', async () => {

From 63baff6ea73fee57bb98ea191585009d8f1508ef Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Sun, 10 Nov 2024 06:47:44 +0530
Subject: [PATCH 6/9] HT-554:Fixed unit test & lint issues

---
 components/src/core/components/Input/CheckboxInput.vue   | 6 +++---
 .../components/Input/__tests__/checkbox-input.spec.ts    | 6 +++---
 components/src/core/components/Input/checkbox-input.scss | 9 +++------
 .../core/components/Input/CheckboxInput.stories.js       | 6 +++---
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/components/src/core/components/Input/CheckboxInput.vue b/components/src/core/components/Input/CheckboxInput.vue
index bcecc57a..25a40d61 100644
--- a/components/src/core/components/Input/CheckboxInput.vue
+++ b/components/src/core/components/Input/CheckboxInput.vue
@@ -4,8 +4,8 @@
       :class="[
         {'--disabled': disabled},
         {
-          'border-enabled': enableBorder,
-          'border-error': hasError && enableBorder,
+          'border-enabled': border,
+          '--error': hasError && border && !disabled,
         },
       ]"
     >
@@ -139,7 +139,7 @@ export default defineComponent({
         return LABEL_POSITIONS.indexOf(value) !== -1;
       },
     },
-    enableBorder: {
+    border: {
       type: Boolean,
       default: false,
     },
diff --git a/components/src/core/components/Input/__tests__/checkbox-input.spec.ts b/components/src/core/components/Input/__tests__/checkbox-input.spec.ts
index 29589143..5ab0ce52 100644
--- a/components/src/core/components/Input/__tests__/checkbox-input.spec.ts
+++ b/components/src/core/components/Input/__tests__/checkbox-input.spec.ts
@@ -78,7 +78,7 @@ describe('CheckboxInput.vue', () => {
   it('should render border when optionBorder is provided', () => {
     const wrapper = mount(CheckboxInput, {
       props: {
-        enableBorder: true,
+        border: true,
       },
     });
     const border = wrapper.find('.border-enabled');
@@ -103,11 +103,11 @@ describe('CheckboxInput.vue', () => {
   it('if hasError is true, border should be red', () => {
     const wrapper = mount(CheckboxInput, {
       props: {
-        enableBorder: true,
+        border: true,
         hasError: true,
       },
     });
     const border = wrapper.find('.border-enabled');
-    expect(border.classes()).toContain('border-error');
+    expect(border.classes()).toContain('--error');
   });
 });
diff --git a/components/src/core/components/Input/checkbox-input.scss b/components/src/core/components/Input/checkbox-input.scss
index 76ccfc77..607d503a 100644
--- a/components/src/core/components/Input/checkbox-input.scss
+++ b/components/src/core/components/Input/checkbox-input.scss
@@ -8,12 +8,9 @@
     padding: 8px;
     border-radius: 10px;
   }
-
-  .border-error {
-    border: 1px solid #ff4e00;
-    box-shadow: 0 0 5px 0.2rem rgba(223, 9, 16, 0.1);
-    padding: 8px;
-    border-radius: 10px;
+  .--error {
+    border: $oxd-input-border--error;
+    box-shadow: $oxd-input-box-shadow--error;
   }
   
   .oxd-checkbox-option-label {
diff --git a/storybook/stories/core/components/Input/CheckboxInput.stories.js b/storybook/stories/core/components/Input/CheckboxInput.stories.js
index d8c85439..551637d5 100644
--- a/storybook/stories/core/components/Input/CheckboxInput.stories.js
+++ b/storybook/stories/core/components/Input/CheckboxInput.stories.js
@@ -70,7 +70,7 @@ export default {
         type: {summary: 'Set label position for checkbox label'},
       },
     },
-    enableBorder: {
+    border: {
       control: {type: 'boolean'},
       table: {
         type: {summary: 'Set border for the checkbox'},
@@ -234,7 +234,7 @@ OptionInfoIcon.parameters = {
 
 export const EnableBorder= Template.bind({
   optionLabel: 'check this!',
-  enableBorder: true,
+  border: true,
 
 });
 
@@ -242,7 +242,7 @@ EnableBorder.parameters = {
   docs: {
     source: {
       code: `<div>
-  <oxd-checkbox-input :enableBorder="true"  optionLabel="Check this!"/>
+  <oxd-checkbox-input :border="true"  optionLabel="Check this!"/>
   <br/>
   <span>{{selected}}</span>
 </div>`,

From 0dfd150e5f09e62bf924ce6a1cc5eaa681ef4450 Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Sun, 10 Nov 2024 07:29:20 +0530
Subject: [PATCH 7/9] HT-554:fix wording issue

---
 components/src/core/components/Input/CheckboxGroup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/core/components/Input/CheckboxGroup.vue b/components/src/core/components/Input/CheckboxGroup.vue
index 4153045e..9a9b74fe 100644
--- a/components/src/core/components/Input/CheckboxGroup.vue
+++ b/components/src/core/components/Input/CheckboxGroup.vue
@@ -22,7 +22,7 @@ export interface Options {
   optionInfoMessage?: string;
   optionInfoIconPosition?: string;
   labelPosition?: string;
-  enableBorder?: boolean;
+  border?: boolean;
 }
 
 export default defineComponent({
@@ -92,7 +92,7 @@ export default defineComponent({
             optionInfoMessage: option.optionInfoMessage,
             optionInfoIconPosition: option.optionInfoIconPosition,
             labelPosition: option.labelPosition,
-            enableBorder: option.enableBorder,
+            border: option.border,
             hasError: this.hasError,
 
             onFocus: () => {

From ff259e251fcc4c71d51bbd71e0e76103b3436bba Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Tue, 12 Nov 2024 08:00:01 +0530
Subject: [PATCH 8/9] HT-554:Fix issue in checkbox component and select input
 story

---
 changelog.md                                               | 4 +++-
 .../stories/core/components/Input/CheckboxInput.stories.js | 1 -
 .../components/Input/SelectInputCustomSelect.story.vue     | 7 ++++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/changelog.md b/changelog.md
index a1aa1969..50ae4011 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,4 +1,6 @@
-2024-11-08 - 30e71393cff4e116c842c56bf35ef84bd659448d - Update OXD CheckBox/SelectInput Component
+2024-11-11 - 30e71393cff4e116c842c56bf35ef84bd659448d - Icons.ts - Add oxd-on-leave,oxd-holiday,oxd-disabled-url,oxd-generate-link,oxd-enable-url icons
+
+2024-11-11 - 30e71393cff4e116c842c56bf35ef84bd659448d - Update OXD CheckBox Component - Add a border prop to enable borders for the checkbox and an optionInfoIconPosition prop to adjust optional icon position.
 
 2024-11-08 - cca468f6ad704248ff1de9f34672f3cf29d516e2 - components/CardTable/Cell/LinkWithPill.vue -  header pass as props
 
diff --git a/storybook/stories/core/components/Input/CheckboxInput.stories.js b/storybook/stories/core/components/Input/CheckboxInput.stories.js
index 551637d5..af1c9e6a 100644
--- a/storybook/stories/core/components/Input/CheckboxInput.stories.js
+++ b/storybook/stories/core/components/Input/CheckboxInput.stories.js
@@ -235,7 +235,6 @@ OptionInfoIcon.parameters = {
 export const EnableBorder= Template.bind({
   optionLabel: 'check this!',
   border: true,
-
 });
 
 EnableBorder.parameters = {
diff --git a/storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue b/storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue
index 54d1dd95..ae2a8bad 100644
--- a/storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue
+++ b/storybook/stories/core/components/Input/SelectInputCustomSelect.story.vue
@@ -1,7 +1,7 @@
 <template>
     <oxd-select :options="options" v-model="value">
-      <template v-slot:option="{data}"> 
-        <oxd-icon name="eye-fill" /> 
+      <template v-slot:option="{ data }"> 
+        <oxd-icon name="eye-fill"  /> 
           <span >{{ data.label }}</span>
          </template>
     </oxd-select>
@@ -36,4 +36,5 @@
       'oxd-icon': Icon,
     },
   };
-  </script>
\ No newline at end of file
+  </script>
+  
\ No newline at end of file

From 52cecc63cf96b6b02df6c9b38be71c6a8a9a1f64 Mon Sep 17 00:00:00 2001
From: deshapriya <deshapriya@orangehrm.com>
Date: Tue, 12 Nov 2024 11:25:15 +0530
Subject: [PATCH 9/9] HT-554:Update change log file

---
 changelog.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/changelog.md b/changelog.md
index 50ae4011..43e52295 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,6 +1,6 @@
-2024-11-11 - 30e71393cff4e116c842c56bf35ef84bd659448d - Icons.ts - Add oxd-on-leave,oxd-holiday,oxd-disabled-url,oxd-generate-link,oxd-enable-url icons
+2024-11-11 - 30e71393cff4e116c842c56bf35ef84bd659448d - components/Icon/icons.ts - Add oxd-on-leave,oxd-holiday,oxd-disabled-url,oxd-generate-link,oxd-enable-url icons
 
-2024-11-11 - 30e71393cff4e116c842c56bf35ef84bd659448d - Update OXD CheckBox Component - Add a border prop to enable borders for the checkbox and an optionInfoIconPosition prop to adjust optional icon position.
+2024-11-11 - 30e71393cff4e116c842c56bf35ef84bd659448d - components/Input/CheckboxInput.vue, components/Input/CheckboxInput.vue - Add a border prop to enable borders for the checkbox and an optionInfoIconPosition prop to adjust optional icon position.
 
 2024-11-08 - cca468f6ad704248ff1de9f34672f3cf29d516e2 - components/CardTable/Cell/LinkWithPill.vue -  header pass as props