import { forwardRef, PropsWithoutRef, ComponentPropsWithoutRef } 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 labelProps?: ComponentPropsWithoutRef<"label"> } export const LabeledTextField = forwardRef( ({ label, outerProps, labelProps, 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