✨ Allows links in checkbox subText

Author: Frontendland

src/components/Checkbox/Checkbox.astro

@@ -43,5 +43,9 @@ const style = color
             </span>
         )}
     </ConditionalWrapper>
-    {label && subText && <span class="sub-text">{subText}</span>}
+    {label && subText && (
+        <span class="sub-text">
+            <Fragment set:html={subText} />
+        </span>
+    )}
 </label>

src/components/Checkbox/Checkbox.svelte

@@ -42,6 +42,6 @@
         {/if}
     </ConditionalWrapper>
     {#if label && subText}
-        <span class="sub-text">{subText}</span>
+        <span class="sub-text">{@html subText}</span>
     {/if}
 </label>

src/components/Checkbox/Checkbox.tsx

@@ -56,7 +56,10 @@ const Checkbox = ({
                 )}
             </ConditionalWrapper>
             {label && subText && (
-                <span className="sub-text">{subText}</span>
+                <span
+                    className="sub-text"
+                    dangerouslySetInnerHTML={{ __html: subText }}
+                />
             )}
         </label>
     )

src/components/Checkbox/checkbox.scss

@@ -5,6 +5,7 @@
     display: inline-flex;
     align-items: center;
     gap: 10px;
+    font-size: 16px;
 
     &.col {
         flex-direction: column;
@@ -58,7 +59,7 @@
         display: inline-block;
         width: 15px;
         height: 15px;
-        border: 1px solid var(--w-checkbox-color);;
+        border: 1px solid var(--w-checkbox-color);
         border-radius: 2px;
         position: relative;
 
@@ -69,7 +70,16 @@
 
     .sub-text {
         margin-left: 25px;
-        font-size: 16px;
+        font-size: 14px;
         color: #BBB;
+
+        a {
+            @include Transition(color);
+            color: #BBB;
+
+            &:hover {
+                color: #FFF;
+            }
+        }
     }
 }