38 lines
923 B
TypeScript
38 lines
923 B
TypeScript
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { useFieldContext } from ".";
|
|
import { FieldErrors } from "./Errors.Field";
|
|
|
|
type InputFieldProps = {
|
|
label: string;
|
|
inputType: string;
|
|
required: boolean;
|
|
};
|
|
|
|
const autoCompleteMap: Record<string, string> = {
|
|
email: "email",
|
|
password: "current-password",
|
|
text: "off",
|
|
username: "username",
|
|
};
|
|
|
|
export const InputField = ({ label, inputType, required }: InputFieldProps) => {
|
|
const field = useFieldContext<any>();
|
|
|
|
return (
|
|
<div className="grid gap-3">
|
|
<Label htmlFor={field.name}>{label}</Label>
|
|
<Input
|
|
id={field.name}
|
|
autoComplete={autoCompleteMap[inputType] ?? "off"}
|
|
value={field.state.value}
|
|
onChange={(e) => field.handleChange(e.target.value)}
|
|
onBlur={field.handleBlur}
|
|
type={inputType}
|
|
required={required}
|
|
/>
|
|
<FieldErrors meta={field.state.meta} />
|
|
</div>
|
|
);
|
|
};
|