Adds hint to input

This commit is contained in:
zomars 2022-05-06 16:09:40 -06:00
parent 1a3c3af072
commit 8ae5b68504

View file

@ -42,6 +42,7 @@ export function InputLeading(props: JSX.IntrinsicElements["div"]) {
type InputFieldProps = { type InputFieldProps = {
label?: ReactNode; label?: ReactNode;
hint?: ReactNode;
addOnLeading?: ReactNode; addOnLeading?: ReactNode;
} & React.ComponentProps<typeof Input> & { } & React.ComponentProps<typeof Input> & {
labelProps?: React.ComponentProps<typeof Label>; labelProps?: React.ComponentProps<typeof Label>;
@ -59,6 +60,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
: "", : "",
className, className,
addOnLeading, addOnLeading,
hint,
...passThrough ...passThrough
} = props; } = props;
return ( return (
@ -82,6 +84,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
) : ( ) : (
<Input id={id} placeholder={placeholder} className={className} {...passThrough} ref={ref} /> <Input id={id} placeholder={placeholder} className={className} {...passThrough} ref={ref} />
)} )}
{hint}
{methods?.formState?.errors[props.name] && ( {methods?.formState?.errors[props.name] && (
<Alert className="mt-1" severity="error" message={methods.formState.errors[props.name].message} /> <Alert className="mt-1" severity="error" message={methods.formState.errors[props.name].message} />
)} )}
@ -192,6 +195,7 @@ const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLForm
<form <form
ref={ref} ref={ref}
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault();
form form
.handleSubmit(handleSubmit)(event) .handleSubmit(handleSubmit)(event)
.catch((err) => { .catch((err) => {