✨ Add HTML support to switch toggle label

Frontendland · Frontendland · commit da36323fca39 · 2025-06-09T16:44:17.000+02:00
diff --git a/src/components/Switch/Switch.astro b/src/components/Switch/Switch.astro
@@ -38,5 +38,5 @@ const styleVariables = classNames([
 <label class:list={classes} style={styleVariables}>
     <input type="checkbox" checked={toggled} disabled={disabled} {...rest} />
     <span class={styles.toggle}></span>
-    {label && <span class={styles.label}>{label}</span>}
+    {label && <span class={styles.label} set:html={label} />}
 </label>
diff --git a/src/components/Switch/Switch.svelte b/src/components/Switch/Switch.svelte
@@ -44,6 +44,6 @@
     />
     <span class={styles.toggle}></span>
     {#if label}
-        <span class={styles.label}>{label}</span>
+        <span class={styles.label}>{@html label}</span>
     {/if}
 </label>
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
@@ -42,7 +42,12 @@ const Switch = ({
                 {...rest}
             />
             <span className={styles.toggle}></span>
-            {label && <span className={styles.label}>{label}</span>}
+            {label && (
+                <span
+                    className={styles.label}
+                    dangerouslySetInnerHTML={{ __html: label }}
+                />
+            )}
         </label>
     )
 }
diff --git a/src/pages/components/switch.astro b/src/pages/components/switch.astro
@@ -49,7 +49,7 @@ const sections = getSections({
             </ComponentWrapper>
 
             <ComponentWrapper title="With label">
-                <section.component label="Toggle me" />
+                <section.component label="Toggle <u>me</u>" />
             </ComponentWrapper>
 
             <ComponentWrapper title="With label on left">

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,12 @@ const Switch = ({`
`42`	`42`	`{...rest}`
`43`	`43`	`/>`
`44`	`44`	`<span className={styles.toggle}></span>`
`45`		`- {label && <span className={styles.label}>{label}</span>}`
	`45`	`+ {label && (`
	`46`	`+ <span`
	`47`	`+ className={styles.label}`
	`48`	`+ dangerouslySetInnerHTML={{ __html: label }}`
	`49`	`+ />`
	`50`	`+ )}`
`46`	`51`	`</label>`
`47`	`52`	`)`
`48`	`53`	`}`