44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import React, { forwardRef } from "react";
|
|
|
|
interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label: string;
|
|
error?: string;
|
|
multiline?: boolean;
|
|
}
|
|
|
|
export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
({ label, error, className = "", multiline, ...props }, ref) => {
|
|
const Component = multiline ? 'textarea' : 'input';
|
|
|
|
return (
|
|
<div className={`${className} relative`}>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-2">
|
|
{label}
|
|
{props.required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
<Component
|
|
ref={ref}
|
|
className={`
|
|
w-full px-4 py-3 rounded-lg
|
|
border border-gray-300
|
|
bg-white text-gray-900
|
|
transition duration-150 ease-in-out
|
|
placeholder-gray-400
|
|
focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
|
hover:border-gray-400
|
|
${error ? "border-red-300 focus:ring-red-500" : ""}
|
|
`}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<div className="absolute -bottom-5 left-0">
|
|
<p className="text-xs text-red-500">{error}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
FormInput.displayName = "FormInput";
|