✨ Add HTML Support to input labels

Author: Frontendland

src/components/Input/Input.astro

@@ -34,7 +34,7 @@ const useLabel = !!(label || subText || Astro.slots.has('default'))
 <ConditionalWrapper condition={useLabel}>
     <label slot="wrapper" class:list={labelClasses}>
         {label && (
-            <div class={styles.label}>{label}</div>
+            <div class={styles.label} set:html={label} />
         )}
         <ConditionalWrapper condition={Astro.slots.has('default')}>
             <div class={styles.wrapper} slot="wrapper">

src/components/Input/Input.svelte

@@ -48,13 +48,13 @@
     >
         <slot />
         <input
-            {...{ type }}
             class={classes}
             bind:value
             on:change={onChange}
             on:keyup={onKeyUp}
             on:input={onInput}
             on:click={onClick}
+            {...{ type }}
             {...$$restProps}
         />
     </ConditionalWrapper>

src/components/Input/Input.tsx

@@ -38,7 +38,10 @@ const Input = ({
             </label>
         )}>
             {label && (
-                <div className={styles.label}>{label}</div>
+                <div
+                    className={styles.label}
+                    dangerouslySetInnerHTML={{ __html: label }}
+                />
             )}
             <ConditionalWrapper condition={!!children} wrapper={children => (
                 <div className={styles.wrapper}>

src/pages/components/input.astro

@@ -98,7 +98,7 @@ const sections = getSections({
             </ComponentWrapper>
 
             <ComponentWrapper title="Input with label">
-                <section.component label="Name" />
+                <section.component label="Average miles driven <b>per week</b>" />
             </ComponentWrapper>
 
             <ComponentWrapper title="Label and sub text">

src/playground/SveltePlayground.svelte

@@ -44,6 +44,7 @@
     let radio = ''
     let toggle = false
     let input = ''
+    let inputBinding = ''
     let slider = 50
     let wordCount = 0
     let select = ''
@@ -138,6 +139,7 @@
 
     <Card title="Input">
         <Input
+            bind:value={inputBinding}
             label="Enter a value"
             placeholder="Or change the color below"
             onKeyUp={e => input = e.currentTarget.value}
@@ -148,6 +150,8 @@
             onChange={e => input = e.currentTarget.value}
         />
 
+        <p>Binding: {inputBinding}</p>
+
         <span class={styles.span}>{input}</span>
     </Card>