@nwon/react-mui-hook-form 1.2.17 → 1.3.1

package/dist/packageExports.js

@@ -1,7 +1,7 @@
 import { CheckBoxOutlineBlank, CheckBox } from '@mui/icons-material';
 import { FormHelperText, useFormControl, Checkbox, FormControl, Autocomplete, TextField, FormControlLabel, Box, InputLabel, OutlinedInput, FormLabel, RadioGroup, Radio, Select, MenuItem, Stack, Tooltip, ListSubheader, Slider, Switch, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { filterNoUndefinedNoNull, uppercaseFirstLetter, assertTruthy, objectHasKey, rethrow } from '@nvon/baseline';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, useEffect } from 'react';
 import { useFormContext, useWatch, Controller, useForm, FormProvider } from 'react-hook-form';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { identity } from 'lodash-es';
@@ -173,6 +173,38 @@ formFieldDefaults) => {
   return withPlainStrings;
 };
 
+/**
+ * An effect that unregisters a field from the form when the component unmounts.
+ *
+ * @throws Error when FormContext is null.
+ */
+const useEffectFieldUnregisterOnUnmount = ({
+  name,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  /**
+   * Default options for unregistering the field.
+   *
+   * Needed to wrap this in a state in order to prevent infinite rerenders.
+   */
+  const [options] = useState(unregisterOptions);
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    unregister
+  } = form;
+  useEffect(() => {
+    return () => {
+      if (isUnregisteringOnUnmount) {
+        unregister(name, options);
+      }
+    };
+  }, [isUnregisteringOnUnmount, name, unregister, options]);
+};
+
 var GroupLabelSorting;
 (function (GroupLabelSorting) {
   GroupLabelSorting["Alphabetical"] = "alphabetical";
@@ -234,6 +266,7 @@ const icon = /*#__PURE__*/jsx(CheckBoxOutlineBlank, {
 const checkedIcon = /*#__PURE__*/jsx(CheckBox, {
   fontSize: "small"
 });
+const defaultNonMultiselectValue = "";
 /**
  * Renders a MUI autocomplete input that is embedded in a react hook form context.
  *
@@ -245,7 +278,10 @@ const InputAutocomplete = ({
   noOptions,
   autoCompleteProps,
   checkboxesForMultiselect: renderCheckboxes,
-  groupSorting
+  groupSorting,
+  inputTextFieldProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   if (!form) {
@@ -265,54 +301,84 @@ const InputAutocomplete = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
-  const sortedOptions = useSortedOptionsWithGroup$1(selectableOptions, groupSorting);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const multiSelect = !!autoCompleteProps?.multiple;
   const value = useWatch({
     name,
     control
   });
-  const multiSelect = !!autoCompleteProps?.multiple;
-  let valueToUse = value;
-  if (!value) {
-    valueToUse = multiSelect ? [] : "";
-  }
+  const {
+    value: valueToUse,
+    hasValue
+  } = useMemo(() => {
+    if (value) {
+      return {
+        value,
+        hasValue: true
+      };
+    }
+    return {
+      value: multiSelect ? [] : defaultNonMultiselectValue,
+      hasValue: false
+    };
+  }, [multiSelect, value]);
+  const adjustedSelectableOptions = useMemo(() => {
+    if (hasValue || multiSelect) {
+      return selectableOptions;
+    }
+    return [...selectableOptions, {
+      value: defaultNonMultiselectValue,
+      label: ""
+    }];
+  }, [hasValue, multiSelect, selectableOptions]);
+  const sortedOptions = useSortedOptionsWithGroup$1(adjustedSelectableOptions, groupSorting);
   assertTruthy(["string", "number", "object"].includes(typeof valueToUse), `Value (Field: ${name}, value: ${valueToUse?.toString() || "undefined"}) for select input has unexpected type`);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || autoCompleteProps?.disabled;
   const props = register(name, {
-    required: required ? requiredErrorMessage : false,
+    required: isRequired ? requiredErrorMessage : false,
     validate,
-    disabled: muiFormControl?.disabled
+    disabled: isDisabled
   });
   const currentValue = useMemo(() => {
-    return multiSelect ? selectableOptions.filter(o => {
+    return multiSelect ? adjustedSelectableOptions.filter(o => {
       if (Array.isArray(valueToUse)) {
         return valueToUse.includes(o.value);
       }
-      return selectableOptions.find(option => option.value === valueToUse);
-    }) : selectableOptions.find(option => option.value === valueToUse);
-  }, [multiSelect, selectableOptions, valueToUse]);
+      return adjustedSelectableOptions.find(option => option.value === valueToUse);
+    }) : adjustedSelectableOptions.find(option => option.value === valueToUse);
+  }, [multiSelect, adjustedSelectableOptions, valueToUse]);
   const renderOption = useMemo(() => {
     if (autoCompleteProps?.renderOption) {
       return autoCompleteProps.renderOption;
     }
-    return multiSelect && renderCheckboxes ? (liProps, option) => /*#__PURE__*/jsxs("li", {
-      ...liProps,
-      children: [/*#__PURE__*/jsx(Checkbox, {
-        icon: icon,
-        checkedIcon: checkedIcon,
-        sx: {
-          mr: 2
-        },
-        checked: Array.isArray(currentValue) ? !!currentValue.find(item => item.value === option.value) : false
-      }), option.label]
-    }) : undefined;
+    return multiSelect && renderCheckboxes ? (liProps, option) => {
+      return /*#__PURE__*/jsxs("li", {
+        ...liProps,
+        children: [/*#__PURE__*/jsx(Checkbox, {
+          icon: icon,
+          checkedIcon: checkedIcon,
+          sx: {
+            mr: 2
+          },
+          checked: Array.isArray(currentValue) ? !!currentValue.find(item => item.value === option.value) : false
+        }), option.label]
+      });
+    } : undefined;
   }, [autoCompleteProps?.renderOption, currentValue, multiSelect, renderCheckboxes]);
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
-    required: required,
-    disabled: muiFormControl?.disabled,
+    required: isRequired,
+    disabled: isDisabled,
     children: [/*#__PURE__*/jsx(Autocomplete, {
       options: sortedOptions,
-      value: currentValue || "",
+      value: currentValue,
       ...props,
+      required: isRequired,
       label: label,
       renderOption: renderOption,
       multiple: multiSelect,
@@ -338,11 +404,20 @@ const InputAutocomplete = ({
         }
       },
       noOptionsText: noOptions,
-      renderInput: params => /*#__PURE__*/jsx(TextField, {
-        ...params,
-        label: label,
-        variant: "outlined"
-      }),
+      filterOptions: options => {
+        return options.filter(o => o.value !== defaultNonMultiselectValue);
+      },
+      renderInput: params => {
+        return /*#__PURE__*/jsx(TextField, {
+          ...params,
+          label: label,
+          variant: "outlined",
+          ...inputTextFieldProps,
+          required: isRequired,
+          disabled: isDisabled,
+          error: hasError
+        });
+      },
       groupBy: option => option.group || "Choose"
       // need to parse this as any in order to get no typing errors
       // for multiselect
@@ -359,7 +434,9 @@ const InputCheckbox = ({
   formField,
   jsxLabel,
   checkboxProps,
-  formControlLabelProps
+  formControlLabelProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control,
@@ -374,19 +451,31 @@ const InputCheckbox = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const id = `hook-form-input-checkbox-${name}`;
+  const disabled = muiFormControl?.disabled || checkboxProps?.disabled;
+  const isRequired = required || muiFormControl?.required;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
-    disabled: muiFormControl?.disabled,
+    disabled: disabled,
+    required: required,
     children: [/*#__PURE__*/jsx(FormControlLabel, {
-      required: jsxLabel ? false : required // If jsxLabel is set, we don't want to show the asterisk.
+      required: jsxLabel ? false : isRequired // If jsxLabel is set, we don't want to show the asterisk.
       ,
-      disabled: muiFormControl?.disabled || checkboxProps?.disabled,
+      disabled: disabled,
+      label: jsxLabel ?? label,
+      sx: {
+        color: t => hasError ? t.palette.error.main : undefined
+      },
       control: /*#__PURE__*/jsx(Controller, {
         name: name,
         control: control,
         rules: {
-          required: required ? requiredErrorMessage : false,
+          required: isRequired ? requiredErrorMessage : false,
           validate
         },
         render: ({
@@ -404,11 +493,11 @@ const InputCheckbox = ({
                 shouldTouch: true
               });
             },
-            ...checkboxProps
+            ...checkboxProps,
+            disabled: disabled
           });
         }
       }),
-      label: jsxLabel ?? label,
       ...formControlLabelProps
     }), /*#__PURE__*/jsx(FormFieldError, {
       fieldName: formField.name
@@ -418,7 +507,9 @@ const InputCheckbox = ({
 
 const InputDatePicker = ({
   formField,
-  datePickerProps
+  datePickerProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -428,18 +519,29 @@ const InputDatePicker = ({
   const {
     label,
     name,
-    required
+    required,
+    requiredErrorMessage
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const [date, setDate] = useState(dayjs());
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || datePickerProps?.disabled;
   return /*#__PURE__*/jsx(Box, {
     children: /*#__PURE__*/jsxs(FormControl, {
       error: hasError,
-      required: required,
-      disabled: muiFormControl?.disabled,
+      required: isRequired,
+      disabled: isDisabled,
       children: [/*#__PURE__*/jsx(Controller, {
         name: name,
         defaultValue: date,
         control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false
+        },
         render: ({
           field: {
             onChange,
@@ -453,7 +555,14 @@ const InputDatePicker = ({
               setDate(event);
             }
           },
-          disabled: muiFormControl?.disabled,
+          disabled: isDisabled,
+          slotProps: {
+            textField: {
+              required: isRequired,
+              disabled: isDisabled,
+              error: hasError
+            }
+          },
           ...restField,
           ...datePickerProps
         })
@@ -466,7 +575,9 @@ const InputDatePicker = ({
 
 const InputDateTimePicker = ({
   formField,
-  dateTimePickerProps
+  dateTimePickerProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -476,18 +587,29 @@ const InputDateTimePicker = ({
   const {
     label,
     name,
-    required
+    required,
+    requiredErrorMessage
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const [date, setDate] = useState(dayjs());
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || dateTimePickerProps?.disabled;
   return /*#__PURE__*/jsx(Box, {
     children: /*#__PURE__*/jsxs(FormControl, {
       error: hasError,
-      required: required,
-      disabled: muiFormControl?.disabled,
+      required: isRequired,
+      disabled: isDisabled,
       children: [/*#__PURE__*/jsx(Controller, {
         name: name,
         defaultValue: date,
         control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false
+        },
         render: ({
           field: {
             onChange,
@@ -502,7 +624,15 @@ const InputDateTimePicker = ({
               setDate(event);
             }
           },
-          disabled: muiFormControl?.disabled,
+          disabled: isDisabled,
+          required: isRequired,
+          slotProps: {
+            textField: {
+              required: isRequired,
+              disabled: isDisabled,
+              error: hasError
+            }
+          },
           ...restField,
           ...dateTimePickerProps
         })
@@ -516,7 +646,9 @@ const InputDateTimePicker = ({
 const InputNumber = ({
   formField,
   textFieldProps,
-  numericFormatProps
+  numericFormatProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const {
@@ -530,19 +662,26 @@ const InputNumber = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
   const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || textFieldProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
     required: required,
-    disabled: muiFormControl?.disabled,
+    disabled: isDisabled,
     children: [/*#__PURE__*/jsx(Controller, {
       name: name,
       control: control,
       rules: {
-        required: required ? requiredErrorMessage : false,
+        required: isRequired ? requiredErrorMessage : false,
         validate
       },
       render: props => {
@@ -560,12 +699,13 @@ const InputNumber = ({
               rest.onChange(target.value);
             },
             label: label,
-            required: required,
             onChange: undefined,
             onBlur: props.field.onBlur,
             error: !!props.fieldState.error,
             ...textFieldProps,
-            ...numericFormatProps
+            ...numericFormatProps,
+            disabled: isDisabled,
+            required: isRequired
           })
         );
       }
@@ -577,7 +717,9 @@ const InputNumber = ({
 
 const InputOutlinedInput = ({
   formField,
-  outlinedInputProps
+  outlinedInputProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const muiFormControl = useFormControl();
@@ -588,6 +730,11 @@ const InputOutlinedInput = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
@@ -595,18 +742,21 @@ const InputOutlinedInput = ({
     control
   } = form;
   const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || outlinedInputProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
     required: required,
     disabled: muiFormControl?.disabled,
     children: [/*#__PURE__*/jsx(InputLabel, {
-      required: required,
+      required: isRequired,
+      disabled: isDisabled,
       children: label
     }), /*#__PURE__*/jsx(Controller, {
       name: name,
       control: control,
       rules: {
-        required: required ? requiredErrorMessage : false,
+        required: isRequired ? requiredErrorMessage : false,
         validate
       },
       render: ({
@@ -620,10 +770,10 @@ const InputOutlinedInput = ({
           value: value,
           onChange: onChange,
           onBlur: onBlur,
-          disabled: muiFormControl?.disabled,
-          required: required,
           label: label,
-          ...outlinedInputProps
+          ...outlinedInputProps,
+          required: isRequired,
+          disabled: isDisabled
         });
       }
     }), /*#__PURE__*/jsx(FormFieldError, {
@@ -636,7 +786,9 @@ const InputRadio = ({
   formField,
   selectableOptions,
   formControlLabelProps,
-  radioGroupProps
+  radioGroupProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -650,20 +802,31 @@ const InputRadio = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const id = `hook-form-input-radio-${name}`;
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || formControlLabelProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
     disabled: muiFormControl?.disabled,
     children: [/*#__PURE__*/jsx(FormLabel, {
       id: id,
-      required: required,
+      required: isRequired,
+      disabled: isDisabled,
+      error: hasError,
+      sx: {
+        color: t => hasError ? t.palette.error.main : undefined
+      },
       children: label
     }), /*#__PURE__*/jsx(Controller, {
       name: name,
       control: control,
-      defaultValue: 0,
       rules: {
-        required: required ? requiredErrorMessage : false,
+        required: isRequired ? requiredErrorMessage : false,
         validate
       },
       render: ({
@@ -684,7 +847,8 @@ const InputRadio = ({
               value: option.value,
               control: /*#__PURE__*/jsx(Radio, {}),
               label: option.label,
-              ...formControlLabelProps
+              ...formControlLabelProps,
+              disabled: isDisabled
             }, option.value);
           })
         });
@@ -718,7 +882,9 @@ const InputSelect = ({
   selectableOptions,
   optionsTitle,
   selectComponentProps,
-  tooltipHolder
+  tooltipHolder,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   if (!form) {
@@ -735,7 +901,12 @@ const InputSelect = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
-  const defaultValue = selectComponentProps?.multiple ? [] : "";
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const defaultValue = useMemo(() => selectComponentProps?.multiple ? [] : "", [selectComponentProps?.multiple]);
   const valueFromForm = useWatch({
     name,
     control,
@@ -747,21 +918,29 @@ const InputSelect = ({
     assertTruthy(["string", "number"].includes(typeof valueFromForm), `Value (Field: ${name}, value: ${valueFromForm?.toString() || "undefined"}) for select input has unexpected type`);
   }
   const id = `input-select-${name}`;
-  const sortedOptions = useSortedOptionsWithGroup(selectableOptions);
+  const adjustedOptions = useMemo(() => selectComponentProps?.multiple || Array.isArray(defaultValue) ? selectableOptions : [...selectableOptions, {
+    value: defaultValue,
+    label: ""
+  }], [defaultValue, selectComponentProps?.multiple, selectableOptions]);
+  const sortedOptions = useSortedOptionsWithGroup(adjustedOptions);
   const hasErrors = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || selectComponentProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasErrors,
-    required: required,
-    disabled: muiFormControl?.disabled,
+    required: isRequired,
+    disabled: isDisabled,
     children: [/*#__PURE__*/jsx(InputLabel, {
       id: id,
-      required: required,
+      required: isRequired,
+      disabled: isDisabled,
+      error: hasErrors,
       children: label
     }), /*#__PURE__*/jsx(Controller, {
       name: name,
       control: control,
       rules: {
-        required: required ? requiredErrorMessage : false,
+        required: isRequired ? requiredErrorMessage : false,
         validate
       },
       render: ({
@@ -783,20 +962,22 @@ const InputSelect = ({
           error: !!error,
           onChange: onChange,
           onBlur: onBlur,
+          disabled: isDisabled,
+          required: isRequired,
           children: [optionsTitle && /*#__PURE__*/jsx(MenuItem, {
             value: defaultValue,
             disabled: true,
             children: /*#__PURE__*/jsx("em", {
               children: optionsTitle
             })
-          }), sortedOptions?.map((option, index) => {
+          }), sortedOptions?.filter(o => o.value !== "").map((option, index) => {
             const optionBefore = sortedOptions[index - 1];
             const showGroup = (optionBefore || index == 0) && option.group && optionBefore?.group !== option.group;
             const disabledText = typeof option.disabled === "string" ? option.disabled : undefined;
-            const isDisabled = !!disabledText || !!option.disabled;
+            const isDisabledToUse = !!disabledText || !!option.disabled || isDisabled;
             const menuItem = /*#__PURE__*/jsx(MenuItem, {
               value: option.value,
-              disabled: isDisabled,
+              disabled: isDisabledToUse,
               title: typeof option.disabled === "string" ? option.disabled : undefined,
               selected: value === option.value,
               children: option.label
@@ -865,7 +1046,9 @@ const InputSelectFromEnum = props => {
 
 const InputSlider = ({
   formField,
-  sliderProps
+  sliderProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const muiFormControl = useFormControl();
@@ -876,6 +1059,11 @@ const InputSlider = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
@@ -883,16 +1071,18 @@ const InputSlider = ({
     control
   } = form;
   const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || sliderProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
-    required: required,
-    disabled: muiFormControl?.disabled,
+    required: isRequired,
+    disabled: isDisabled,
     children: [/*#__PURE__*/jsx(Controller, {
       name: name,
       control: control,
       defaultValue: 0,
       rules: {
-        required: required ? requiredErrorMessage : false,
+        required: isRequired ? requiredErrorMessage : false,
         validate
       },
       render: ({
@@ -906,12 +1096,13 @@ const InputSlider = ({
           value: value || 0,
           onChange: onChange,
           onBlur: onBlur,
-          required: required,
+          required: isRequired,
           label: label,
           component: sliderProps?.component || "span",
           max: typeof sliderProps?.max === "number" ? sliderProps.max : undefined,
           min: typeof sliderProps?.min === "number" ? sliderProps.min : undefined,
-          ...sliderProps
+          ...sliderProps,
+          disabled: isDisabled
         });
       }
     }), /*#__PURE__*/jsx(FormFieldError, {
@@ -923,7 +1114,9 @@ const InputSlider = ({
 const InputSwitch = ({
   formField,
   switchProps,
-  formControlLabelProps
+  formControlLabelProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control,
@@ -937,17 +1130,29 @@ const InputSwitch = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || switchProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
-    disabled: muiFormControl?.disabled,
+    disabled: isDisabled,
+    required: isRequired,
     children: [/*#__PURE__*/jsx(FormControlLabel, {
       label: formField.label,
-      disabled: muiFormControl?.disabled || switchProps?.disabled,
+      disabled: isDisabled,
+      required: isRequired,
+      sx: {
+        color: t => hasError ? t.palette.error.main : undefined
+      },
       control: /*#__PURE__*/jsx(Controller, {
         name: name,
         control: control,
         rules: {
-          required: required ? requiredErrorMessage : false,
+          required: isRequired ? requiredErrorMessage : false,
           validate
         },
         render: ({
@@ -977,7 +1182,9 @@ const InputSwitch = ({
 
 const InputTextField = ({
   formField,
-  textFieldProps
+  textFieldProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const {
@@ -991,19 +1198,26 @@ const InputTextField = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
   const hasError = useFormFieldHasError(formField.name);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || textFieldProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
-    required: required,
-    disabled: muiFormControl?.disabled,
+    required: isRequired,
+    disabled: isDisabled,
     children: [/*#__PURE__*/jsx(Controller, {
       name: name,
       control: control,
       rules: {
-        required: required ? requiredErrorMessage : false,
+        required: isRequired ? requiredErrorMessage : false,
         validate
       },
       render: ({
@@ -1019,10 +1233,10 @@ const InputTextField = ({
           error: !!error,
           onChange: onChange,
           value: value,
-          disabled: muiFormControl?.disabled,
           label: label,
-          required: required,
-          ...textFieldProps
+          ...textFieldProps,
+          required: isRequired,
+          disabled: isDisabled
         });
       }
     }), /*#__PURE__*/jsx(FormFieldError, {
@@ -1034,7 +1248,9 @@ const InputTextField = ({
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const InputTimePicker = ({
   formField,
-  timePickerProps
+  timePickerProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -1044,18 +1260,29 @@ const InputTimePicker = ({
   const {
     label,
     name,
-    required
+    required,
+    requiredErrorMessage
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const [date, setDate] = useState(dayjs());
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || timePickerProps?.disabled;
   return /*#__PURE__*/jsx(Box, {
     children: /*#__PURE__*/jsxs(FormControl, {
       error: hasError,
-      required: required,
-      disabled: muiFormControl?.disabled,
+      required: isRequired,
+      disabled: isDisabled,
       children: [/*#__PURE__*/jsx(Controller, {
         name: name,
         defaultValue: date,
         control: control,
+        rules: {
+          required: isRequired ? requiredErrorMessage : false
+        },
         render: ({
           field: {
             onChange,
@@ -1069,7 +1296,15 @@ const InputTimePicker = ({
               setDate(event);
             }
           },
-          disabled: muiFormControl?.disabled,
+          disabled: isDisabled,
+          required: isRequired,
+          slotProps: {
+            textField: {
+              required: isRequired,
+              disabled: isDisabled,
+              error: hasError
+            }
+          },
           ...restField,
           ...timePickerProps
         })
@@ -1084,7 +1319,9 @@ const InputToggleButton = ({
   formField,
   toggleButtonProps,
   formControlLabelProps,
-  children
+  children,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     register,
@@ -1099,6 +1336,11 @@ const InputToggleButton = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const id = `hook-form-input-toggle-button-${name}`;
   const valueToUse = !!useWatch({
     name: name,
@@ -1114,19 +1356,22 @@ const InputToggleButton = ({
       shouldTouch: true
     });
   }, [name, setValue, valueToUse]);
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || toggleButtonProps?.disabled;
   const registered = register(name, {
-    required: required ? requiredErrorMessage : false,
+    required: isRequired ? requiredErrorMessage : false,
     validate,
     disabled: muiFormControl?.disabled
   });
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
-    disabled: muiFormControl?.disabled,
+    disabled: isDisabled,
+    required: isRequired,
     children: [/*#__PURE__*/jsx(FormControlLabel, {
-      required: required,
+      required: isRequired,
       label: formField.label,
       labelPlacement: "top",
-      disabled: muiFormControl?.disabled || toggleButtonProps?.disabled,
+      disabled: isDisabled,
       control: /*#__PURE__*/jsx(ToggleButton, {
         value: valueToUse,
         selected: valueToUse,
@@ -1139,6 +1384,7 @@ const InputToggleButton = ({
       sx: {
         alignItems: "flex-start",
         ml: 0,
+        color: t => hasError ? t.palette.error.main : undefined,
         ...formControlLabelProps?.sx
       },
       ...formControlLabelProps
@@ -1154,7 +1400,9 @@ const InputToggleButtonGroup = ({
   stackProps,
   typographyProps,
   buttons,
-  enforceValueSelected = false
+  enforceValueSelected = false,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     register,
@@ -1169,6 +1417,11 @@ const InputToggleButtonGroup = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const changeEv = useCallback((_, value) => {
     const onSetValue = () => setValue(name, value, {
       shouldValidate: true,
@@ -1196,6 +1449,8 @@ const InputToggleButtonGroup = ({
     name: name,
     control: control
   });
+  const isRequired = required || muiFormControl?.required;
+  const isDisabled = muiFormControl?.disabled || toggleButtonGroupProps?.disabled;
   const toggleButtonGroup = /*#__PURE__*/jsx(ToggleButtonGroup, {
     ...registered,
     ...toggleButtonGroupProps,
@@ -1209,20 +1464,30 @@ const InputToggleButtonGroup = ({
       value: button.value,
       "aria-labelledby": id,
       ...button.toggleButtonProps,
+      disabled: isDisabled,
       children: button.icon
     }, `${button.value.toString()}-${i}`))
   });
   const label = /*#__PURE__*/jsx(Typography, {
     component: "span",
     ...typographyProps,
+    sx: {
+      color: t => {
+        if (hasError) {
+          return t.palette.error.main;
+        }
+        return isDisabled ? t.palette.text.disabled : undefined;
+      }
+    },
     children: formField.label
   });
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
-    disabled: muiFormControl?.disabled,
+    disabled: isDisabled,
+    required: isRequired,
     children: [formField.label ? /*#__PURE__*/jsxs(Stack, {
       ...stackProps,
-      children: [required ? /*#__PURE__*/jsxs(Stack, {
+      children: [isRequired ? /*#__PURE__*/jsxs(Stack, {
         id: id,
         component: "label",
         sx: {
@@ -1283,19 +1548,27 @@ const HookFormProvider = FormProvider;
 
 const InputEmail = props => {
   const merged = useMergedFormField(props.formField, props.formField.t, formDefaults);
-  return /*#__PURE__*/jsx(InputTextField, {
+  const commonProps = useMemo(() => ({
     textFieldProps: {
       type: "email",
       autoComplete: "email",
       ...props.textFieldProps
     },
     formField: merged
+  }), [merged, props.textFieldProps]);
+  return props.isUnregisteringOnUnmount ? /*#__PURE__*/jsx(InputTextField, {
+    ...commonProps,
+    isUnregisteringOnUnmount: props.isUnregisteringOnUnmount,
+    unregisterOptions: props.unregisterOptions
+  }) : /*#__PURE__*/jsx(InputTextField, {
+    ...commonProps,
+    isUnregisteringOnUnmount: props.isUnregisteringOnUnmount
   });
 };
 const formDefaults = {
   required: true,
   validate: emailInput => {
-    if (emailInput.match(/.@./)) {
+    if (emailInput && emailInput.match(/.@./)) {
       return true;
     }
     return "E-Mail address invalid";
@@ -1305,7 +1578,9 @@ const formDefaults = {
 const InputPasswordSet = ({
   passwordField,
   passwordValidationField,
-  doNotMatchError
+  doNotMatchError,
+  passwordValidationTextFieldProps,
+  passwordTextFieldProps
 }) => {
   const {
     watch
@@ -1321,21 +1596,23 @@ const InputPasswordSet = ({
     return value === passwordValue || doNotMatchError;
   }, [doNotMatchError, passwordFieldMerged.name, watch]);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(InputOutlinedInput, {
+    children: [/*#__PURE__*/jsx(InputTextField, {
       formField: passwordFieldMerged,
-      outlinedInputProps: {
+      textFieldProps: {
         type: "password",
-        autoComplete: "new-password"
+        autoComplete: "new-password",
+        ...passwordTextFieldProps
       }
-    }), /*#__PURE__*/jsx(InputOutlinedInput, {
+    }), /*#__PURE__*/jsx(InputTextField, {
       formField: {
         ...validationFieldMerged,
         validate: validatePasswordMatch,
         t: passwordValidationField.t
       },
-      outlinedInputProps: {
+      textFieldProps: {
         type: "password",
-        autoComplete: "new-password"
+        autoComplete: "new-password",
+        ...passwordValidationTextFieldProps
       }
     })]
   });