This repository was archived by the owner on Mar 24, 2026. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathInputField.tsx
More file actions
93 lines (86 loc) · 2.48 KB
/
InputField.tsx
File metadata and controls
93 lines (86 loc) · 2.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
'use client';
import { useFormContext, Controller } from 'react-hook-form';
import { FormItem, FormLabel, FormDescription } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { memo } from 'react';
export interface InputProps {
name: string;
label: string;
type?: 'text' | 'email' | 'tel' | 'url' | 'password';
description?: string;
placeholder?: string;
disabled?: boolean;
required?: boolean;
className?: string;
}
const InputField = memo(function InputField({
name,
label,
type = 'text',
description,
placeholder,
disabled,
required = false,
className,
}: InputProps) {
const {
control,
formState: { errors },
} = useFormContext();
// Check if this field has an error
const hasError = !!errors[name];
const errorMessage = hasError
? String(errors[name]?.message || 'This field is required')
: '';
return (
<Controller
control={control}
name={name}
render={({ field }) => (
<FormItem className={className}>
<FormLabel
className={cn(
'font-medium text-base',
required &&
"after:content-['*'] after:ml-0.5 after:text-red-500 after:font-bold",
!required &&
"after:content-['(optional)'] after:ml-1.5 after:text-muted-foreground after:text-xs after:font-normal"
)}
>
{label}
</FormLabel>
{description && (
<FormDescription className="mt-2">{description}</FormDescription>
)}
<Input
type={type}
placeholder={placeholder}
disabled={disabled}
autoComplete="new-password"
data-lpignore="true"
className={cn(
'bg-transparent dark:bg-input/30',
hasError && 'border-red-500 focus:ring-red-500'
)}
value={field.value || ''}
onChange={(e) => {
field.onChange(e);
// React Hook Form will handle validation automatically in onChange mode
}}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/>
{/* Add direct error display that will always show */}
{hasError && (
<p className="text-sm font-medium text-red-400 mt-1">
{errorMessage}
</p>
)}
</FormItem>
)}
/>
);
});
export default InputField;