@codecademy/gamut

Index: package/dist/ConnectedForm/utils.js
===================================================================
--- package/dist/ConnectedForm/utils.js
+++ package/dist/ConnectedForm/utils.js
@@ -75,9 +75,10 @@
 };
 export const useField = ({
   name,
   disabled,
-  loading
+  loading,
+  customValidations
 }) => {
   // This is fixed in a later react-hook-form version:
   // https://github.com/react-hook-form/react-hook-form/issues/2887
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -100,9 +101,13 @@
   } = useSubmitState({
     disabled: disabled || formStateDisabled,
     loading
   });
-  const validation = (validationRules && validationRules[name]) ?? undefined;
+  const formValidation = (validationRules && validationRules[name]) ?? undefined;
+  const validation = formValidation || customValidations ? {
+    ...formValidation,
+    ...customValidations
+  } : undefined;
   const ref = register(name, validation);
   return {
     control,
     error,
@@ -231,14 +236,16 @@
   watchUpdateKeyName,
   disabled,
   loading,
   type,
-  shouldDirtyOnChange
+  shouldDirtyOnChange,
+  customValidations
 }) {
   const useFieldPayload = useField({
     name,
     disabled,
-    loading
+    loading,
+    customValidations
   });
   const defaultValue = type === 'checkbox' ? false : '';
 
   // START - Specific to useDebouncedField - START