fix: allow for jsx elements on field error message (#156)

bloom-housing · Aug 29, 2024 · b1a1de8 · b1a1de8
1 parent 4533ac0
commit b1a1de8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/forms/Field.stories.tsx b/src/forms/Field.stories.tsx
@@ -26,6 +26,20 @@ export const TextFieldError = () => {
   )
 }
 
+export const TextFieldErrorElement = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      label={"Custom label"}
+      type={"text"}
+      error={true}
+      errorMessage={<div className="font-bold italic">Custom error message as element</div>}
+    />
+  )
+}
+
 export const CurrencyField = () => {
   const { register, getValues, setValue } = useForm({ mode: "onChange" })
   return (

diff --git a/src/forms/Field.tsx b/src/forms/Field.tsx
@@ -5,7 +5,7 @@ import { httpsRegex, urlRegex } from "../helpers/validators"
 
 export interface FieldProps {
   error?: boolean
-  errorMessage?: string
+  errorMessage?: string | JSX.Element
   className?: string
   controlClassName?: string
   caps?: boolean