From e5d4483641fc4e627abc1b85f5c6414210baa1ed Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:20:47 -0700
Subject: [PATCH] docs(elements): Add docs for `FieldState` `config` field
 (#1330)

---
 docs/elements/reference/common.mdx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/elements/reference/common.mdx b/docs/elements/reference/common.mdx
index c7f8f5b7e5..cef02887f9 100644
--- a/docs/elements/reference/common.mdx
+++ b/docs/elements/reference/common.mdx
@@ -117,7 +117,7 @@ If you use `<Input type="password" validatePassword>`, additional information in
 
 | Name | Type | Description |
 | - | - | - |
-| `children` | `(args: { state: 'success' \| 'error' \| 'warning' \| 'info' \| 'idle'; message: string \| undefined; codes: ErrorMessageKey[] \| undefined }) => React.ReactNode` | Use this function to access the field's state. Optionally, information regarding password validation is given. |
+| `children` | `(args: { state: 'success' \| 'error' \| 'warning' \| 'info' \| 'idle'; message: string \| undefined; codes: (string \| [string, Record<string, string \| number>])[] \| undefined }) => React.ReactNode` | Use this function to access the field's state. Optionally, information regarding password validation is given. |
 
 ### Usage {{ toc: false }}
 
@@ -137,8 +137,10 @@ If you use `<Input type="password" validatePassword>`, additional information in
 
 If you're using [`<Input type="password" validatePassword>`](#input-type-password), the `<FieldState>`'s children function receives additional arguments:
 
-- `message` - The standardized English message generated for the current state of the input. This message is generated based on the codes associated with the `<FieldState>`.
-- `codes` -  The codes associated with the `<FieldState>`. You can use these codes to return custom `message` or localize its contents.
+| Name | Type | Description |
+| - | - | - |
+| `message` | `string` | The standardized English message generated for the current state of the input. This message is generated based on the codes associated with the `<FieldState>`. |
+| `codes` | `(string \| [string, Record<string, string \| number>])[]` | The error codes associated with the `<FieldState>`. You can use these codes to return a custom `message` or localize its contents. |
 
 Initially, the `<Input>` will have a `state` of `idle` until the user interacts with the input. Depending on the user's input, the `state` will change to `'success' | 'error' | 'warning' | 'info'`.
 
@@ -151,7 +153,7 @@ Initially, the `<Input>` will have a `state` of `idle` until the user interacts
       <div>
         <pre>Field state: {state}</pre>
         <pre>Field msg: {message}</pre>
-        <pre>Codes: {codes?.join(', ')}</pre>
+        <pre>Codes: {JSON.stringify(codes, null, 2)}</pre>
       </div>
     )}
   </Clerk.FieldState>