import { forwardRef, PropsWithoutRef } from "react"; import { useFormContext } from "react-hook-form"; export interface LabeledTextFieldProps extends PropsWithoutRef { /** Field name. */ name: string; /** Field label. */ label: string; /** Field type. Doesn't include radio buttons and checkboxes */ type?: "text" | "password" | "email" | "number"; outerProps?: PropsWithoutRef; } export const LabeledTextField = forwardRef( ({ label, outerProps, name, ...props }, ref) => { const { register, formState: { isSubmitting, errors }, } = useFormContext(); const error = Array.isArray(errors[name]) ? errors[name].join(", ") : errors[name]?.message || errors[name]; return (
{error && (
{error}
)}
); }, ); export default LabeledTextField;