From f0fc3006329664a420565d3dc4ace8cebc00fece Mon Sep 17 00:00:00 2001
From: Ethan Shaw <ethan.shaw@canonical.com>
Date: Wed, 15 Jul 2026 17:18:30 +0000
Subject: [PATCH 1/2] feat(MultiSelect): Allow ReactNode to be used as checkbox
 label

---
 src/components/MultiSelect/MultiSelect.scss        | 1 +
 src/components/MultiSelect/MultiSelect.stories.tsx | 1 +
 src/components/MultiSelect/MultiSelect.tsx         | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MultiSelect/MultiSelect.scss b/src/components/MultiSelect/MultiSelect.scss
index a6f82151d..21e6044ac 100644
--- a/src/components/MultiSelect/MultiSelect.scss
+++ b/src/components/MultiSelect/MultiSelect.scss
@@ -89,6 +89,7 @@ $dropdown-max-height: 20rem;
 
   &,
   .p-checkbox {
+    max-width: 100%;
     width: 100%;
   }
 }
diff --git a/src/components/MultiSelect/MultiSelect.stories.tsx b/src/components/MultiSelect/MultiSelect.stories.tsx
index 1ad83f590..7002fb542 100644
--- a/src/components/MultiSelect/MultiSelect.stories.tsx
+++ b/src/components/MultiSelect/MultiSelect.stories.tsx
@@ -43,6 +43,7 @@ export const CondensedExample: Story = {
       ...Array.from({ length: 26 }, (_, i) => ({
         label: `${String.fromCharCode(i + 65)}`,
         value: `${String.fromCharCode(i + 65)}`,
+        node: <span style={{ display: "inline flex", justifyContent: "space-between", textIndent: 0, width: "100%" }}><span>{String.fromCharCode(i + 65)}</span><span className="u-text--muted">20 instances</span></span>
       })),
       ...Array.from({ length: 26 }, (_, i) => ({
         label: `Item ${i + 1}`,
diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx
index b889291ac..a0fa22b3d 100644
--- a/src/components/MultiSelect/MultiSelect.tsx
+++ b/src/components/MultiSelect/MultiSelect.tsx
@@ -10,6 +10,7 @@ import { FadeInDown } from "./FadeInDown";
 export type MultiSelectItem = {
   label: string;
   value: string | number;
+  node?: ReactNode;
   group?: string;
 };
 
@@ -190,7 +191,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
                       >
                         <CheckboxInput
                           disabled={disabledItemValues.has(item.value)}
-                          label={item.label}
+                          label={item.node ?? item.label}
                           checked={selectedItemValues.has(item.value)}
                           value={item.value}
                           onChange={handleOnChange}

From 9503d72db1c5bbf8e9a9f9ad759e8fbbdfe39169 Mon Sep 17 00:00:00 2001
From: Ethan Shaw <ethan.shaw@canonical.com>
Date: Wed, 15 Jul 2026 21:06:35 +0000
Subject: [PATCH 2/2] Run Prettier

---
 src/components/MultiSelect/MultiSelect.stories.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/MultiSelect/MultiSelect.stories.tsx b/src/components/MultiSelect/MultiSelect.stories.tsx
index 7002fb542..b4831dab6 100644
--- a/src/components/MultiSelect/MultiSelect.stories.tsx
+++ b/src/components/MultiSelect/MultiSelect.stories.tsx
@@ -43,7 +43,19 @@ export const CondensedExample: Story = {
       ...Array.from({ length: 26 }, (_, i) => ({
         label: `${String.fromCharCode(i + 65)}`,
         value: `${String.fromCharCode(i + 65)}`,
-        node: <span style={{ display: "inline flex", justifyContent: "space-between", textIndent: 0, width: "100%" }}><span>{String.fromCharCode(i + 65)}</span><span className="u-text--muted">20 instances</span></span>
+        node: (
+          <span
+            style={{
+              display: "inline flex",
+              justifyContent: "space-between",
+              textIndent: 0,
+              width: "100%",
+            }}
+          >
+            <span>{String.fromCharCode(i + 65)}</span>
+            <span className="u-text--muted">20 instances</span>
+          </span>
+        ),
       })),
       ...Array.from({ length: 26 }, (_, i) => ({
         label: `Item ${i + 1}`,