Adds hint to input
This commit is contained in:
parent
1a3c3af072
commit
8ae5b68504
1 changed files with 4 additions and 0 deletions
|
@ -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) => {
|
||||||
|
|
Loading…
Reference in a new issue