48 lines
1.0 KiB
TypeScript
48 lines
1.0 KiB
TypeScript
import React from "react";
|
|
import {
|
|
FieldValues,
|
|
Path,
|
|
RegisterOptions,
|
|
UseFormReturn,
|
|
} from "react-hook-form";
|
|
import { cn } from "../../../helper/cn";
|
|
|
|
interface InputProps<T extends FieldValues>
|
|
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "form"> {
|
|
name: Path<T>;
|
|
form: UseFormReturn<T>;
|
|
formOptions?: RegisterOptions<T>;
|
|
label?: string;
|
|
placeholder?: string;
|
|
}
|
|
|
|
export const Input = <T extends FieldValues>({
|
|
name,
|
|
label = name,
|
|
placeholder = label,
|
|
form,
|
|
formOptions,
|
|
className,
|
|
...inputProps
|
|
}: InputProps<T>) => {
|
|
return (
|
|
<label className="floating-label w-full mt-5">
|
|
<span className="text-lg flex items-center gap-2">{label}</span>
|
|
<input
|
|
{...form.register(name, formOptions)}
|
|
className={cn(
|
|
"input input-bordered w-full placeholder:text-neutral-600",
|
|
className,
|
|
)}
|
|
placeholder={placeholder}
|
|
{...inputProps}
|
|
/>
|
|
{form.formState.errors[name] && (
|
|
<p className="text-error">
|
|
{form.formState.errors[name].message as string}
|
|
</p>
|
|
)}
|
|
</label>
|
|
);
|
|
};
|