New props parameters.

src/components/Auth/InputField/InputField.tsx

@@ -15,11 +15,11 @@ type Props = {
    * Takes error from react-hook-form and is thrown if
    * the component is not valid.
    */
-  error: boolean;
+  error?: boolean;
   /**
    * Message to display if the component is not valid.
    */
-  errorMessage: string;
+  errorMessage?: string;
   /**
    * React-hook-form control.
    */
@@ -28,10 +28,28 @@ type Props = {
    * Validation rules.
    */
   rules?: Partial<unknown>;
+  /**
+   * HTML type of input.
+   */
+  type: string;
+
+  /**
+   * MUI props override for defining style on fly.
+   */
+  InputLabelProps?: Record<string, boolean>;
 };
 
 export const InputField: FC<Props> = (props: Props) => {
-  const { name, label, error, errorMessage, control, rules } = props;
+  const {
+    name,
+    label,
+    error,
+    type,
+    errorMessage,
+    control,
+    rules,
+    InputLabelProps,
+  } = props;
   return (
     <Controller
       name={name}
@@ -41,7 +59,7 @@ export const InputField: FC<Props> = (props: Props) => {
         <TextField
           variant="outlined"
           margin="normal"
-          type={name}
+          type={type}
           required
           fullWidth
           id={name}
@@ -53,6 +71,7 @@ export const InputField: FC<Props> = (props: Props) => {
           autoFocus
           error={error}
           helperText={error && errorMessage}
+          InputLabelProps={{ ...InputLabelProps, shrink: true }}
         />
       )}
     />
@@ -61,4 +80,7 @@ export const InputField: FC<Props> = (props: Props) => {
 
 InputField.defaultProps = {
   rules: undefined,
+  error: false,
+  errorMessage: '',
+  InputLabelProps: {},
 };