Skip to content

Commit

Permalink
docs(elements): Add docs for FieldState config field (#1330)
Browse files Browse the repository at this point in the history
  • Loading branch information
dstaley authored Aug 5, 2024
1 parent f79c881 commit 2cb3825
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions docs/elements/reference/common.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}

Expand All @@ -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'`.

Expand All @@ -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>
Expand Down

0 comments on commit 2cb3825

Please sign in to comment.