From 3f252a8abd504884c7fd909bcd0618829174bedb Mon Sep 17 00:00:00 2001
From: GW_MC <72297530+GWMCwing@users.noreply.github.com>
Date: Sat, 20 Dec 2025 16:20:31 +0800
Subject: [PATCH] feat: add required asterisk indicator to TextField component

---
 apps/frontend/app/components/Form/TextField.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/frontend/app/components/Form/TextField.tsx b/apps/frontend/app/components/Form/TextField.tsx
index 3e98ceb..c21f25c 100644
--- a/apps/frontend/app/components/Form/TextField.tsx
+++ b/apps/frontend/app/components/Form/TextField.tsx
@@ -2,6 +2,7 @@ import type { AnyFieldMeta } from '@tanstack/react-form';
 import { LucideEye, LucideEyeClosed } from 'lucide-react';
 import { useCallback, useId, useState } from 'react';
 import { InfoIcon, type InfoIconProps } from '../info';
+import { Text } from '@radix-ui/themes';
 
 export type TextFieldProps = {
   label?: string;
@@ -32,6 +33,11 @@ export function TextField({ label, value, onChange, labelProps, labelDivProps, s
       {label && (
         <div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}>
           {label}
+          {rest?.required && (
+            <Text size="3" style={{ color: 'var(--red-9)', marginLeft: 2 }}>
+              *
+            </Text>
+          )}
           {infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />}
         </div>
       )}