diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx
index 91dadea0e9..e5306a25aa 100644
--- a/packages/components/input/src/input.tsx
+++ b/packages/components/input/src/input.tsx
@@ -53,7 +53,9 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
         {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
         ) : (
-          <div {...getDescriptionProps()}>{description}</div>
+          <div {...getDescriptionProps()}>
+            {description === " " ? <span>&#8203;</span> : description}
+          </div>
         )}
       </div>
     );
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index d74a2523a8..43394b8554 100644
--- a/packages/components/input/stories/input.stories.tsx
+++ b/packages/components/input/stories/input.stories.tsx
@@ -91,6 +91,14 @@ const MirrorTemplate = (args) => (
   </div>
 );
 
+const WithDescriptionTemplate = (args) => (
+  <div className="w-full max-w-4xl flex flex-row items-end gap-4">
+    <Input {...args} />
+    <Input {...args} placeholder="Enter your email" />
+    <Input {...args} description=" " placeholder="Enter your email" />
+  </div>
+);
+
 const FormTemplate = (args) => (
   <form
     className="w-full max-w-xl flex flex-row items-end gap-4"
@@ -590,7 +598,7 @@ export const WithoutLabel = {
 };
 
 export const WithDescription = {
-  render: MirrorTemplate,
+  render: WithDescriptionTemplate,
 
   args: {
     ...defaultProps,