From da0be9cb52291bfbc6cfc833c4dff9e6be203599 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 26 Feb 2026 14:11:33 +0700
Subject: [PATCH] refactor(FE): Update input components to adjust spacing and
 text size

---
 src/components/input/DropFileInput.tsx | 10 ++++++++--
 src/components/input/RadioInput.tsx    |  4 ++--
 src/components/input/SelectInput.tsx   |  6 ++++--
 src/components/input/TagInput.tsx      |  6 ++++--
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/input/DropFileInput.tsx b/src/components/input/DropFileInput.tsx
index e146a994..c8c88a1e 100644
--- a/src/components/input/DropFileInput.tsx
+++ b/src/components/input/DropFileInput.tsx
@@ -134,14 +134,20 @@ const DropFileInput: React.FC<DropFileInputProps> = ({
 
         {!isError && bottomLabel && (
           <p
-            className={cn('w-full text-sm opacity-60', className?.bottomLabel)}
+            className={cn(
+              'w-full mt-1.5 text-xs opacity-60',
+              className?.bottomLabel
+            )}
           >
             {bottomLabel}
           </p>
         )}
         {isError && (
           <p
-            className={cn('w-full text-sm text-error', className?.errorMessage)}
+            className={cn(
+              'w-full mt-1.5 text-xs text-error',
+              className?.errorMessage
+            )}
           >
             {errorMessage}
           </p>
diff --git a/src/components/input/RadioInput.tsx b/src/components/input/RadioInput.tsx
index e508e7ba..a3ae9e5b 100644
--- a/src/components/input/RadioInput.tsx
+++ b/src/components/input/RadioInput.tsx
@@ -144,12 +144,12 @@ export const RadioGroup = ({
 
         {/* Label bawah */}
         {!isError && bottomLabel && (
-          <p className='text-sm opacity-60'>{bottomLabel}</p>
+          <p className='mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
         )}
 
         {/* Pesan error */}
         {isError && errorMessage && (
-          <p className='text-sm text-error'>{errorMessage}</p>
+          <p className='mt-1.5 text-xs text-error'>{errorMessage}</p>
         )}
       </div>
     </RadioGroupContext.Provider>
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index ef959ea7..0edb3b6d 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -488,9 +488,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         />
       )}
 
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      {isError && (
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
+      )}
       {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );
diff --git a/src/components/input/TagInput.tsx b/src/components/input/TagInput.tsx
index a14b2f63..6388cffe 100644
--- a/src/components/input/TagInput.tsx
+++ b/src/components/input/TagInput.tsx
@@ -159,9 +159,11 @@ const TagInput: React.FC<TagInputProps> = ({
 
       {/* Bottom label or error message */}
       {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && (
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };