feat(formfield): support errorMessage array

src/components/FormField/FormField.tsx

@@ -7,7 +7,7 @@ import styles from './FormField.module.css';
 type Props = {
   label?: string;
   hint?: ReactNode;
-  errorMessage?: string;
+  errorMessage?: string | (string | undefined)[];
   className?: string;
   children: ReactNode;
 };
@@ -16,11 +16,23 @@ const FormField: React.FC<Props> = ({ label, className, children, hint, errorMes
   const mergedClassNames = classNames(cssReset.ventura, className, {
     [styles.isSpaced]: Boolean(label),
   });
+
+  let errorMessages: string[] = [];
+  if (Array.isArray(errorMessage)) {
+    errorMessages = errorMessage.filter(Boolean) as string[];
+  } else if (errorMessage) {
+    errorMessages = [errorMessage];
+  }
+
   return (
     <div className={mergedClassNames}>
       {Boolean(label) && <span className={styles.label}>{label}</span>}
       {children}
-      {Boolean(errorMessage) && <span className={styles.errorMessage}>{errorMessage}</span>}
+      {errorMessages.map((err) => (
+        <span key={err} className={styles.errorMessage}>
+          {err}
+        </span>
+      ))}
       {Boolean(hint) && <div className={styles.hint}>{hint}</div>}
     </div>
   );