Files
nextjs/app/components/InputField.tsx
2024-12-16 13:30:44 +05:30

45 lines
963 B
TypeScript

"use client";
import React from "react";
interface InputFieldProps {
label?: string;
placeholder?: string;
type?: string;
register: any;
name: string;
error?: string;
}
const InputField: React.FC<InputFieldProps> = ({
label,
placeholder,
type = "text",
register,
name,
error,
}) => {
return (
<div className="mb-4">
{label && (
<label htmlFor={name} className="block text-sm text-gray-700 mb-2" >
{label}
</label>
)}
<input
id={name}
type={type}
placeholder={placeholder}
{...register(name)}
className={`w-full px-4 py-3 text-xs border rounded-md focus:outline-none ${
error ? "border-red-500 border-2" : "border-gray-300 focus:ring-2 focus:ring-blue-500 "
}`}
/>
{error && <span className="text-red-500 text-xs font-bold ps-2 pt-1 flex align-middle">
{error}</span>}
</div>
);
};
export default InputField;