diff --git a/src/components/AuthUser/InputField/InputField.md b/src/components/AuthUser/InputField/InputField.md
new file mode 100644
index 0000000000000000000000000000000000000000..895642c7229f4ae7277f0d932f147fd0c8e53c0d
--- /dev/null
+++ b/src/components/AuthUser/InputField/InputField.md
@@ -0,0 +1,24 @@
+Wrapper for any input field 
+
+```js
+import { SubmitHandler, useForm } from 'react-hook-form';
+const { control } = useForm();
+
+<InputField
+    name="password"
+    control={control}
+    rules={{
+    minLength: 8,
+    maxLength: 60,
+    required: {
+        value: true,
+        message: 'Insert valid password',
+    },
+    }}
+    label="Password"
+    error={false}
+    errorMessage="Insert valid password"
+/>
+
+
+```
diff --git a/src/components/AuthUser/InputField/InputField.tsx b/src/components/AuthUser/InputField/InputField.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ee002a43ac6a34af89632f37fa67c966eda73b16
--- /dev/null
+++ b/src/components/AuthUser/InputField/InputField.tsx
@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { TextField } from '@material-ui/core';
+import { Control, Controller, FieldValues } from 'react-hook-form';
+
+type Props = {
+  /**
+   * Name of the elemement. (ex. email, password).
+   */
+  name: string;
+  /**
+   * Aria label.
+   */
+  label: string;
+  /**
+   * Takes error from react-hook-form and is thrown if
+   * the component is not valid.
+   */
+  error: boolean;
+  /**
+   * Message to display if the component is not valid.
+   */
+  errorMessage: string;
+  /**
+   * React-hook-form control.
+   */
+  control: Control<FieldValues> | undefined;
+  /**
+   * Validation rules.
+   */
+  rules: Partial<unknown>;
+};
+
+export const InputField: FC<Props> = (props: Props) => {
+  const { name, label, error, errorMessage, control, rules } = props;
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ onChange, value }) => (
+        <TextField
+          variant="outlined"
+          margin="normal"
+          type={name}
+          required
+          fullWidth
+          id={name}
+          label={label}
+          name={name}
+          onChange={onChange}
+          value={value}
+          autoComplete={name}
+          autoFocus
+          error={error}
+          helperText={error && errorMessage}
+        />
+      )}
+    />
+  );
+};