diff --git a/src/components/MultiSelect/MultiSelect.scss b/src/components/MultiSelect/MultiSelect.scss
index a6f82151..21e6044a 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 1ad83f59..b4831dab 100644
--- a/src/components/MultiSelect/MultiSelect.stories.tsx
+++ b/src/components/MultiSelect/MultiSelect.stories.tsx
@@ -43,6 +43,19 @@ export const CondensedExample: Story = {
...Array.from({ length: 26 }, (_, i) => ({
label: `${String.fromCharCode(i + 65)}`,
value: `${String.fromCharCode(i + 65)}`,
+ node: (
+
+ {String.fromCharCode(i + 65)}
+ 20 instances
+
+ ),
})),
...Array.from({ length: 26 }, (_, i) => ({
label: `Item ${i + 1}`,
diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx
index b889291a..a0fa22b3 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 = ({
>