@@ -12,141 +177,34 @@ export default function App() {
formOptions={{
defaultValues: {
username: '',
- countryCode: '+1',
+ country: 'US',
phoneNumber: '',
password: '',
showPassword: false,
},
+ onSubmit: (form) => {
+ const submitValues = {
+ username: form.value.username,
+ phone: formatPhoneNumberIntl(
+ '+' +
+ getCountryCallingCode(form.value.country) +
+ form.value.phoneNumber,
+ ),
+ password: form.value.password,
+ }
+ console.log(submitValues)
+ alert(JSON.stringify(submitValues, null, 2))
+ },
}}
>
- {(useStore, reset) => (
+ {(useStore) => (
<>
-
{
- return (
-
- )
- }}
- />
-
-
{
- return (
-
-
- +1 United States
-
- +44 United Kingdom
-
- +49 Germany
- +47 Norway
-
- )
- }}
- />
- {
- return (
-
- {
- const phoneNumberValue = e.target.value.replace(
- /[^0-9\s()+-]/g,
- '',
- )
- field.handleChange(phoneNumberValue)
- }}
- />
-
-
- )
- }}
- />
-
- state.values.showPassword)
- ? 'text'
- : 'password'
- }
- />
-
-
- )
- }}
- />
- {
- return (
-
- )
- }}
- />
+
+
+
- state}>
- {(state) => (
- reset()}
- variant="ghost"
- size="xs"
- >
- Reset
-
- )}
-
- state}>
- {(state) => (
-
- Submit
-
- )}
-
+ Reset
+ Submit
)}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2eb010f73..887cb275d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,7 +61,7 @@ importers:
version: 3.6.1(@typescript-eslint/parser@6.4.1)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
eslint-plugin-import:
specifier: ^2.29.1
- version: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+ version: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.0)(eslint@8.56.0)
eslint-plugin-react:
specifier: ^7.33.2
version: 7.33.2(eslint@8.56.0)
@@ -161,13 +161,16 @@ importers:
version: link:../../../packages/zod-form-adapter
cva:
specifier: 1.0.0-beta.1
- version: 1.0.0-beta.1(typescript@5.2.2)
+ version: 1.0.0-beta.1
react:
specifier: ^18.0.0
version: 18.2.0
react-dom:
specifier: ^18.0.0
version: 18.2.0(react@18.2.0)
+ react-phone-number-input:
+ specifier: ^3.3.8
+ version: 3.3.9(react-dom@18.2.0)(react@18.2.0)
zod:
specifier: ^3.21.4
version: 3.22.4
@@ -192,7 +195,7 @@ importers:
version: 3.4.1
vite:
specifier: ^5.0.10
- version: 5.0.10(@types/node@18.19.4)
+ version: 5.0.10
examples/react/simple:
dependencies:
@@ -4490,7 +4493,7 @@ packages:
'@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
'@types/babel__core': 7.20.5
react-refresh: 0.14.0
- vite: 5.0.10(@types/node@18.19.4)
+ vite: 5.0.10
transitivePeerDependencies:
- supports-color
dev: true
@@ -5533,6 +5536,10 @@ packages:
engines: {node: '>=8'}
dev: false
+ /classnames@2.5.1:
+ resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+ dev: false
+
/cli-cursor@3.1.0:
resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
engines: {node: '>=8'}
@@ -5765,6 +5772,10 @@ packages:
yaml: 1.10.2
dev: false
+ /country-flag-icons@1.5.9:
+ resolution: {integrity: sha512-9jrjv2w7kRbqNtdtMdK2j3gmDIZzd5l9L2pZiQjF9J0mUcB+NKIGDNADTDHBEp8EQtjOkCOcciJGGSOpERdXPQ==}
+ dev: false
+
/cross-spawn@5.1.0:
resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
dependencies:
@@ -5808,7 +5819,7 @@ packages:
is-git-repository: 1.1.1
dev: true
- /cva@1.0.0-beta.1(typescript@5.2.2):
+ /cva@1.0.0-beta.1:
resolution: {integrity: sha512-gznFqTgERU9q4wg7jfgqtt34+RUt9S5t0xDAAEuDwQEAXEgjdDkKXpLLNjwSxsB4Ln/sqWJEH7yhE8Ny0mxd0w==}
peerDependencies:
typescript: '>= 4.5.5 < 6'
@@ -5817,7 +5828,6 @@ packages:
optional: true
dependencies:
clsx: 2.0.0
- typescript: 5.2.2
dev: false
/damerau-levenshtein@1.0.8:
@@ -6368,7 +6378,7 @@ packages:
eslint: 8.56.0
eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.0)(eslint@8.56.0)
eslint-plugin-jsx-a11y: 6.8.0(eslint@8.56.0)
eslint-plugin-react: 7.33.2(eslint@8.56.0)
eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0)
@@ -6408,7 +6418,7 @@ packages:
enhanced-resolve: 5.15.0
eslint: 8.56.0
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.56.0)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.0)(eslint@8.56.0)
fast-glob: 3.3.1
get-tsconfig: 4.7.0
is-core-module: 2.13.1
@@ -6431,7 +6441,7 @@ packages:
enhanced-resolve: 5.15.0
eslint: 8.56.0
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.0)(eslint@8.56.0)
fast-glob: 3.3.1
get-tsconfig: 4.7.0
is-core-module: 2.13.1
@@ -6503,7 +6513,7 @@ packages:
- supports-color
dev: true
- /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+ /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.0)(eslint@8.56.0):
resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
engines: {node: '>=4'}
peerDependencies:
@@ -7521,6 +7531,12 @@ packages:
resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
dev: true
+ /input-format@0.3.9:
+ resolution: {integrity: sha512-99Gew2huiuYpNsyZoucauy5OT3oXEoWUeINGES4SlU74eFxbtYqNO+yEP6uKFhfB0UKTvq4gOC+6/3Oskru+IQ==}
+ dependencies:
+ prop-types: 15.8.1
+ dev: false
+
/internal-slot@1.0.5:
resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
engines: {node: '>= 0.4'}
@@ -8291,6 +8307,10 @@ packages:
type-check: 0.4.0
dev: true
+ /libphonenumber-js@1.10.54:
+ resolution: {integrity: sha512-P+38dUgJsmh0gzoRDoM4F5jLbyfztkU6PY6eSK6S5HwTi/LPvnwXqVCQZlAy1FxZ5c48q25QhxGQ0pq+WQcSlQ==}
+ dev: false
+
/liftoff@4.0.0:
resolution: {integrity: sha512-rMGwYF8q7g2XhG2ulBmmJgWv25qBsqRbDn5gH0+wnuyeFt7QBJlHJmtg5qEdn4pN6WVAUMgXnIxytMFRX9c1aA==}
engines: {node: '>=10.13.0'}
@@ -9998,6 +10018,21 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /react-phone-number-input@3.3.9(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-TKK8VoFWR9RfPi90j/3Rr6j/S9V8/eovqUgNNNSyD0+WtaeLTlJVWb8DD7P57eZqkLv303sL8JMiZoExwKICxw==}
+ peerDependencies:
+ react: '>=16.8'
+ react-dom: '>=16.8'
+ dependencies:
+ classnames: 2.5.1
+ country-flag-icons: 1.5.9
+ input-format: 0.3.9
+ libphonenumber-js: 1.10.54
+ prop-types: 15.8.1
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/react-refresh@0.14.0:
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
engines: {node: '>=0.10.0'}
@@ -11418,6 +11453,7 @@ packages:
resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
engines: {node: '>=14.17'}
hasBin: true
+ dev: true
/typescript@5.3.3:
resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
@@ -11739,6 +11775,41 @@ packages:
- supports-color
dev: true
+ /vite@5.0.10:
+ resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==}
+ engines: {node: ^18.0.0 || >=20.0.0}
+ hasBin: true
+ peerDependencies:
+ '@types/node': ^18.0.0 || >=20.0.0
+ less: '*'
+ lightningcss: ^1.21.0
+ sass: '*'
+ stylus: '*'
+ sugarss: '*'
+ terser: ^5.4.0
+ peerDependenciesMeta:
+ '@types/node':
+ optional: true
+ less:
+ optional: true
+ lightningcss:
+ optional: true
+ sass:
+ optional: true
+ stylus:
+ optional: true
+ sugarss:
+ optional: true
+ terser:
+ optional: true
+ dependencies:
+ esbuild: 0.19.11
+ postcss: 8.4.32
+ rollup: 4.9.2
+ optionalDependencies:
+ fsevents: 2.3.3
+ dev: true
+
/vite@5.0.10(@types/node@18.19.4):
resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==}
engines: {node: ^18.0.0 || >=20.0.0}
From 1ef83ada0755b78fcc865374a7a6e6a8a4542e5e Mon Sep 17 00:00:00 2001
From: Michael Brusegard <56915010+michaelbrusegard@users.noreply.github.com>
Date: Fri, 26 Jan 2024 04:26:08 +0100
Subject: [PATCH 09/10] docs: wrote introduction and about the fundamental
Form, Field and Subscribe components
---
.../guides/reusable-styled-form-component.md | 69 +++++++++++++++++++
1 file changed, 69 insertions(+)
create mode 100644 docs/framework/react/guides/reusable-styled-form-component.md
diff --git a/docs/framework/react/guides/reusable-styled-form-component.md b/docs/framework/react/guides/reusable-styled-form-component.md
new file mode 100644
index 000000000..86eb031f5
--- /dev/null
+++ b/docs/framework/react/guides/reusable-styled-form-component.md
@@ -0,0 +1,69 @@
+---
+id: reusable-styled-form-component
+title: Reusable Styled Form Component
+---
+
+# Creating your own Reusable Styled Form Component
+This guide will walk you through the process of creating a reusable styled form component. A reusable styled form component is a component that encapsulates the logic and styling of a form, allowing you to reuse it across your application. It is highly opinionated and meant to be customised for your specific project. The concepts in this guide are applicable to any ui-library and it is meant as a reference for you to create your own reusable styled form component.
+
+You can think of a reusable styled form component as a wrapper around TanStack Form that encapsulates the logic and styling of a form for a higher level of abstraction. It can be thought of as a giant UI component for forms that implements simpler UI components like `Input`, `Select`, `Button`, etc.
+
+## When to Create a Reusable Styled Form Component
+Creating a reusable styled form component is a great way to reduce boilerplate and enforce consistency across your application. It is especially useful if you have a lot of forms in your application, but in many cases it is overkill. If you only have a few forms in your application, it is probably better to use TanStack Form directly.
+
+## Prerequisites
+This example uses [Tailwind CSS](https://tailwindcss.com/) for styling and [Class Variance Authority](https://beta.cva.style/) for UI component variants. You can use any styling solution of your choice, just replace the custom components with your own and provide the appropriate props. It also uses `Zod` for validation, but you can use any validation library of your choice.
+
+## Composition
+The reusable form component is composed of compound components to make it easier to customise. The `` component is the main component. While `` and `` renders the appropriate components from TanStack Form. The rest of the compound components are examples of components that you can add to your own reusable form component. For example, `` is a compound component that renders a text field. You can add as many compound components as you want to your reusable form component and some of the examples in this guide are just that, examples. You may not need a `` component, but it is included here.
+
+## Let's Get Started
+
+### ``
+
+```tsx
+const Form = React.forwardRef(
+ ({ className, children, formOptions, ...props }, ref) => {
+ const { Provider, Field, handleSubmit, useStore, Subscribe, reset } =
+ useForm({
+ validatorAdapter: zodValidator,
+ ...formOptions,
+ })
+ return (
+
+
+
+ )
+ },
+) as FormComponentProps
+```
+The `` component wraps the form in the `` from TanStack Form and provides the appropriate `onSubmit` props which is something you would normally do when using TanStack Form directly. It also initiates the `useForm` from Tanstack Form and here you can pass any options that you want to have in every single form in your application. For example the validator adapter. The `` component also renders the `` which provides the `` and `` components to the rest of the form. The `` component also provides the `useStore` hook from TanStack Form to the rest of the form. This is so that you can access the form state from anywhere in the form.
+
+### `` & ``
+
+```tsx
+Form.Field = React.forwardRef(({ ...props }, ref) => {
+ const { Field } = React.useContext(FormContext)
+ return
+})
+
+Form.Subscribe = React.forwardRef(({ ...props }, ref) => {
+ const { Subscribe } = React.useContext(FormContext)
+ return
+})
+```
+The `` and `` components are just wrappers around the `` and `` components from TanStack Form. They are not necessary, but they make it easier to customise the form. For example, `` gives access to the `field` prop which is the field object from TanStack Form. This allows you to access and overwrite any value that you pass down in your UI compound components. For example, you can have a default `onChange={(e) => field.handleChange(e.target.value)}` prop that you want to change to something else like `onChange={(e) => field.handleChange(e.target.valueAsNumber)}` where you still would need access to the `field` prop. The `` component can be useful if you want to render a component that is not a field, but still needs access to the form state. For example, a loading indicator, a button that is disabled when the form is submitting, a JSON representation of the form state, etc. If you don't need this flexibility in your reusable form component, you can hardcode the `` and `` components from TanStack Form directly into your UI compound components.
+
From 3d7ae2bf98f622263216cec9912166ee72376632 Mon Sep 17 00:00:00 2001
From: Michael Brusegard <56915010+michaelbrusegard@users.noreply.github.com>
Date: Fri, 26 Jan 2024 18:25:05 +0100
Subject: [PATCH 10/10] docs: Write the rest of documentation
---
.../guides/reusable-styled-form-component.md | 258 +++++++++++++++++-
1 file changed, 255 insertions(+), 3 deletions(-)
diff --git a/docs/framework/react/guides/reusable-styled-form-component.md b/docs/framework/react/guides/reusable-styled-form-component.md
index 86eb031f5..837452f9e 100644
--- a/docs/framework/react/guides/reusable-styled-form-component.md
+++ b/docs/framework/react/guides/reusable-styled-form-component.md
@@ -4,7 +4,7 @@ title: Reusable Styled Form Component
---
# Creating your own Reusable Styled Form Component
-This guide will walk you through the process of creating a reusable styled form component. A reusable styled form component is a component that encapsulates the logic and styling of a form, allowing you to reuse it across your application. It is highly opinionated and meant to be customised for your specific project. The concepts in this guide are applicable to any ui-library and it is meant as a reference for you to create your own reusable styled form component.
+This guide will walk you through the process of creating a reusable styled form component. A reusable styled form component is a component that encapsulates the logic and styling of a form, allowing you to reuse it across your application. It is highly opinionated and meant to be customised for your specific project. The concepts in this guide are applicable to any UI library and it is meant as a reference for you to create your own reusable styled form component.
You can think of a reusable styled form component as a wrapper around TanStack Form that encapsulates the logic and styling of a form for a higher level of abstraction. It can be thought of as a giant UI component for forms that implements simpler UI components like `Input`, `Select`, `Button`, etc.
@@ -12,10 +12,10 @@ You can think of a reusable styled form component as a wrapper around TanStack F
Creating a reusable styled form component is a great way to reduce boilerplate and enforce consistency across your application. It is especially useful if you have a lot of forms in your application, but in many cases it is overkill. If you only have a few forms in your application, it is probably better to use TanStack Form directly.
## Prerequisites
-This example uses [Tailwind CSS](https://tailwindcss.com/) for styling and [Class Variance Authority](https://beta.cva.style/) for UI component variants. You can use any styling solution of your choice, just replace the custom components with your own and provide the appropriate props. It also uses `Zod` for validation, but you can use any validation library of your choice.
+This example uses [Tailwind CSS](https://tailwindcss.com/) for styling and [Class Variance Authority](https://beta.cva.style/) for UI component variants. You can use any styling solution of your choice, just replace the custom components with your own and provide the appropriate props. It also uses `Zod` for validation, but you can use any validation library of your choice. If you want to take a look at the custom UI components you can see them in the codesandbox in the examples section.
## Composition
-The reusable form component is composed of compound components to make it easier to customise. The `` component is the main component. While `` and `` renders the appropriate components from TanStack Form. The rest of the compound components are examples of components that you can add to your own reusable form component. For example, `` is a compound component that renders a text field. You can add as many compound components as you want to your reusable form component and some of the examples in this guide are just that, examples. You may not need a `` component, but it is included here.
+The reusable form component is composed of compound components to make it easier to customise. The `` component is the main component. While `` and `` renders the appropriate components from TanStack Form. The rest of the compound components are examples of components that you can add to your own reusable form component. For example, `` is a compound component that renders a text field. You can add as many compound components as you want to your reusable form component and some of the examples in this guide are just that, examples. You may not need a `` component, but it is included here. All the components in this example are forwarding the ref to the underlying HTML element. This is so that you can access the HTML element directly if needed. For example, if you want to focus the first field in the form when the form is submitted.
## Let's Get Started
@@ -67,3 +67,255 @@ Form.Subscribe = React.forwardRef(({ ...props }, ref) => {
```
The `` and `` components are just wrappers around the `` and `` components from TanStack Form. They are not necessary, but they make it easier to customise the form. For example, `` gives access to the `field` prop which is the field object from TanStack Form. This allows you to access and overwrite any value that you pass down in your UI compound components. For example, you can have a default `onChange={(e) => field.handleChange(e.target.value)}` prop that you want to change to something else like `onChange={(e) => field.handleChange(e.target.valueAsNumber)}` where you still would need access to the `field` prop. The `` component can be useful if you want to render a component that is not a field, but still needs access to the form state. For example, a loading indicator, a button that is disabled when the form is submitting, a JSON representation of the form state, etc. If you don't need this flexibility in your reusable form component, you can hardcode the `` and `` components from TanStack Form directly into your UI compound components.
+### ``, `` & ``
+
+```tsx
+Form.Field.Text = React.forwardRef(
+ ({ className, hasErrorField, field, label, ...props }, ref) => {
+ return (
+
+ field.handleChange(e.target.value)}
+ aria-describedby={
+ hasErrorField && field.state.meta.errors.length !== 0
+ ? `${field.name}-error`
+ : ''
+ }
+ aria-invalid={field.state.meta.errors.length !== 0}
+ ref={ref}
+ {...props}
+ />
+ {label && (
+
+ )}
+
+ )
+ },
+)
+
+Form.Field.Checkbox = React.forwardRef<
+ HTMLInputElement,
+ FormFieldCheckboxProps
+>(({ className, children, field, label, ...props }, ref) => {
+ return (
+
+ field.handleChange(e.target.checked)}
+ ref={ref}
+ {...props}
+ />
+ {label && (
+
+ )}
+
+ )
+})
+
+Form.Field.Select = React.forwardRef(
+ ({ className, hasErrorField, field, label, ...props }, ref) => {
+ return (
+
+ {label && (
+
+ )}
+
+ )
+ },
+)
+```
+The ``, `` components are examples of compound components that you can add to your reusable form component. They are using the custom UI components ``, ``, `` and aswell as extra Tailwind styles to style the form. You can use your own UI components, style the primitive HTML elements directly or use a UI styling library. All of these components have all the base props that you would have to supply anyway like `id`, `name`, `value`, `onChange`, `onBlur`, etc. given through the field prop. You pass this prop from the `` which make it easy to overwrite anything if needed. They also optionaly render a label and error message if you pass the `label` and `hasErrorField` props. The `hasErrorField` prop is a boolean that enables aria labelling when you combine it with an error message component. This is not applicable to the Checkbox.
+
+### ``
+
+```tsx
+Form.Field.Error = React.forwardRef(
+ ({ className, field, ...props }, ref) => {
+ return (
+ <>
+
+
+ {field.state.meta.errors.length !== 0 &&
+ field.state.meta.errors[0].split(', ')[0]}
+
+
+ )
+ },
+)
+```
+The `` component is an example of a styled error message compound component that you can combine with the other field compound components to render an error message. It shows an error message only when needed and uses aria labelling to make it accessible. It also only renders a single error message even if there are multiple errors. You can use your own error message component or style the error message directly on the field compound components. This is just an example.
+
+### `` & ``
+
+```tsx
+Form.SubmitButton = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+ state.canSubmit}>
+ {(canSubmit) => (
+
+ )}
+
+ )
+ },
+)
+
+Form.ResetButton = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ const { reset } = React.useContext(FormContext)
+ return (
+ state.submissionAttempts}>
+ {(submissionAttempts) => (
+
+ )
+ },
+)
+```
+
+The `` and `` components uses a custom `` UI component to render the buttons with appropriate styles. They also implement the `` component diresctly to subscribe to the necessary form state and render the buttons accordingly. The `` component is disabled when the form is not ready to submit and the `` component is disabled when the form has not been submitted. You don't have to create these components if you dont need them. You can just use the `` component directly in your form if you want that, but it can be useful if you need to use the same style of Submit and Reset buttons across multiple forms. You can also choose to not implement the `` component directly, and instead pass the state as a prop to a `` component to make the prop more reusable. There is always a balance of how much abstraction you want to have in your reusable form component, and how much you want to hardcode to make it easier to customise.
+
+## A simple example
+This is a simple example of how to use this reusable styled form component as it is made here. For a more complex example, that implements many features of TanStack Form, see in the codesandbox in the example section.
+
+```tsx
+
+```
+The pros with this reusable form component is that this form is not verbose at all and easy to reuse. You can also easily add new styled compound components to it and it is completely customizable. The cons is that it is more complex than just using TanStack Form directly and it is more difficult to understand how it works. It is also more difficult to debug if something goes wrong.
+
+## End Notes
+Hope this guide was helpful and that you can use it as a reference to create your own reusable styled form component, or it helped you better understand the concepts of TanStack Form. It can be smart to take a llook at the example in the codesandbox to see how it works in a more real world example.
\ No newline at end of file