HT-554: Add icon position and custom borders to OXD checkbox component

changelog.md

@@ -1,3 +1,7 @@
+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 - 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
 
 2024-11-07 - 897c614bb977f6e559e717ad0a69a0bce5869183 - components/Tabs/Tabs.vue - Add tooltip to tab icon when title is absent

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-->

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;

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;
+  border?: 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,
+            border: option.border,
+            hasError: this.hasError,
+
             onFocus: () => {
               this.$emit('focus', true);
             },

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': border,
+          '--error': hasError && border && !disabled,
+        },
+      ]"
+    >
+      <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;
+      },
+    },
+    border: {
+      type: Boolean,
+      default: false,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ['update:modelValue', 'blur', 'focus', 'change'],