diff --git a/src/components/common/HelperLabel/HelperLabel.tsx b/src/components/common/HelperLabel/HelperLabel.tsx
new file mode 100644
index 0000000..3d28f4a
--- /dev/null
+++ b/src/components/common/HelperLabel/HelperLabel.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const helperLabelVariants = cva('typo-caption2 flex gap-0.5 items-center', {
+  variants: {
+    variant: {
+      error: 'text-error',
+      success: 'text-success',
+      default: 'text-alternative',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+interface HelperLabelProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof helperLabelVariants> {}
+
+const HelperLabel = ({ className, variant, children, ...props }: HelperLabelProps) => {
+  return (
+    <p className={cn(helperLabelVariants({ variant }), className)} {...props}>
+      {children}
+    </p>
+  )
+}
+
+export { HelperLabel }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
deleted file mode 100644
index a50c569..0000000
--- a/src/components/ui/label.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-
-import { cn } from '@/lib/utils'
-
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }