├── .editorconfig ├── .gitattributes ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ └── config.yml ├── renovate.json └── workflows │ ├── autofix.yml │ ├── ci.yml │ └── pr.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .nx └── workflows │ └── dynamic-changesets.yaml ├── .prettierignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── codecov.yml ├── docs ├── assets │ ├── field-states-extended.png │ ├── field-states.png │ └── react_form_composability.svg ├── comparison.md ├── config.json ├── framework │ ├── angular │ │ ├── guides │ │ │ ├── arrays.md │ │ │ ├── basic-concepts.md │ │ │ ├── listeners.md │ │ │ ├── submission-handling.md │ │ │ └── validation.md │ │ ├── quick-start.md │ │ └── reference │ │ │ ├── classes │ │ │ └── tanstackfield.md │ │ │ ├── functions │ │ │ ├── injectform.md │ │ │ └── injectstore.md │ │ │ └── index.md │ ├── lit │ │ ├── guides │ │ │ ├── arrays.md │ │ │ └── basic-concepts.md │ │ ├── quick-start.md │ │ └── reference │ │ │ ├── classes │ │ │ └── tanstackformcontroller.md │ │ │ └── index.md │ ├── react │ │ ├── community │ │ │ ├── balastrong-tutorial.md │ │ │ └── tutorials.md │ │ ├── guides │ │ │ ├── arrays.md │ │ │ ├── async-initial-values.md │ │ │ ├── basic-concepts.md │ │ │ ├── custom-errors.md │ │ │ ├── debugging.md │ │ │ ├── form-composition.md │ │ │ ├── linked-fields.md │ │ │ ├── listeners.md │ │ │ ├── react-native.md │ │ │ ├── reactivity.md │ │ │ ├── ssr.md │ │ │ ├── submission-handling.md │ │ │ ├── ui-libraries.md │ │ │ └── validation.md │ │ ├── quick-start.md │ │ └── reference │ │ │ ├── functions │ │ │ ├── createformhook.md │ │ │ ├── createformhookcontexts.md │ │ │ ├── field.md │ │ │ ├── usefield.md │ │ │ ├── useform.md │ │ │ ├── usestore.md │ │ │ └── usetransform.md │ │ │ ├── index.md │ │ │ ├── interfaces │ │ │ ├── reactformapi.md │ │ │ └── withformprops.md │ │ │ └── type-aliases │ │ │ ├── fieldcomponent.md │ │ │ ├── reactformextendedapi.md │ │ │ └── usefield.md │ ├── solid │ │ ├── guides │ │ │ ├── arrays.md │ │ │ ├── async-initial-values.md │ │ │ ├── basic-concepts.md │ │ │ ├── linked-fields.md │ │ │ ├── submission-handling.md │ │ │ └── validation.md │ │ ├── quick-start.md │ │ └── reference │ │ │ ├── functions │ │ │ ├── createfield.md │ │ │ ├── createform.md │ │ │ ├── field.md │ │ │ └── usestore.md │ │ │ ├── index.md │ │ │ ├── interfaces │ │ │ └── solidformapi.md │ │ │ └── type-aliases │ │ │ ├── createfield.md │ │ │ └── fieldcomponent.md │ ├── svelte │ │ ├── guides │ │ │ ├── arrays.md │ │ │ ├── async-initial-values.md │ │ │ ├── basic-concepts.md │ │ │ ├── linked-fields.md │ │ │ └── validation.md │ │ └── quick-start.md │ └── vue │ │ ├── guides │ │ ├── arrays.md │ │ ├── async-initial-values.md │ │ ├── basic-concepts.md │ │ ├── linked-fields.md │ │ ├── listeners.md │ │ ├── submission-handling.md │ │ └── validation.md │ │ ├── quick-start.md │ │ └── reference │ │ ├── functions │ │ ├── usefield.md │ │ ├── useform.md │ │ └── usestore.md │ │ ├── index.md │ │ ├── interfaces │ │ ├── vuefieldapi.md │ │ └── vueformapi.md │ │ ├── type-aliases │ │ ├── fieldcomponent.md │ │ ├── fieldcomponentboundprops.md │ │ ├── fieldcomponentprops.md │ │ └── usefield.md │ │ └── variables │ │ └── field.md ├── installation.md ├── overview.md ├── philosophy.md ├── reference │ ├── classes │ │ ├── fieldapi.md │ │ └── formapi.md │ ├── functions │ │ ├── evaluate.md │ │ ├── formoptions.md │ │ ├── isglobalformvalidationerror.md │ │ ├── isstandardschemavalidator.md │ │ └── mergeform.md │ ├── index.md │ ├── interfaces │ │ ├── anydeepkeyandvalue.md │ │ ├── arraydeepkeyandvalue.md │ │ ├── fieldapioptions.md │ │ ├── fieldlisteners.md │ │ ├── fieldoptions.md │ │ ├── fieldvalidators.md │ │ ├── formlisteners.md │ │ ├── formoptions.md │ │ ├── formstate.md │ │ ├── formvalidators.md │ │ ├── objectdeepkeyandvalue.md │ │ ├── standardschemav1issue.md │ │ ├── tupledeepkeyandvalue.md │ │ └── unknowndeepkeyandvalue.md │ ├── type-aliases │ │ ├── allobjectkeys.md │ │ ├── alltuplekeys.md │ │ ├── anyfieldapi.md │ │ ├── anyfieldmeta.md │ │ ├── anyfieldmetabase.md │ │ ├── anyfieldmetaderived.md │ │ ├── anyformapi.md │ │ ├── anyformstate.md │ │ ├── arrayaccessor.md │ │ ├── baseformstate.md │ │ ├── deepkeyandvaluearray.md │ │ ├── deepkeyandvalueobject.md │ │ ├── deepkeyandvaluetuple.md │ │ ├── deepkeys.md │ │ ├── deepkeysandvalues.md │ │ ├── deepkeysandvaluesimpl.md │ │ ├── deepkeysoftype.md │ │ ├── deeprecord.md │ │ ├── deepvalue.md │ │ ├── derivedformstate.md │ │ ├── fieldinfo.md │ │ ├── fieldmeta.md │ │ ├── fieldmetabase.md │ │ ├── fieldmetaderived.md │ │ ├── fieldstate.md │ │ ├── formvalidatefn.md │ │ ├── formvalidationerror.md │ │ ├── formvalidator.md │ │ ├── nullable.md │ │ ├── objectaccessor.md │ │ ├── objectvalue.md │ │ ├── standardschemav1.md │ │ ├── tstandardschemavalidatorissue.md │ │ ├── tstandardschemavalidatorvalue.md │ │ ├── tupleaccessor.md │ │ ├── unknownaccessor.md │ │ ├── unwrapfieldasyncvalidateorfn.md │ │ ├── unwrapfieldvalidateorfn.md │ │ ├── unwrapformasyncvalidateorfn.md │ │ ├── unwrapformvalidateorfn.md │ │ ├── updater.md │ │ ├── updaterfn.md │ │ ├── validationerror.md │ │ ├── validationmeta.md │ │ └── validationsource.md │ └── variables │ │ └── standardschemavalidators.md └── typescript.md ├── eslint.config.js ├── examples ├── angular │ ├── array │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ └── app.component.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── main.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ └── tsconfig.spec.json │ └── simple │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ └── app.component.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ └── main.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ └── tsconfig.spec.json ├── lit │ ├── simple │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ └── styles.ts │ │ └── tsconfig.json │ └── ui-libraries │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ ├── index.ts │ │ └── styles.ts │ │ └── tsconfig.json ├── react │ ├── array │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── emblem-light.svg │ │ ├── src │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── compiler │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── emblem-light.svg │ │ ├── src │ │ │ └── index.tsx │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── field-errors-from-form-validators │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── emblem-light.svg │ │ ├── src │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── large-form │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── emblem-light.svg │ │ ├── src │ │ │ ├── App.tsx │ │ │ ├── components │ │ │ │ └── text-fields.tsx │ │ │ ├── features │ │ │ │ └── people │ │ │ │ │ ├── address-fields.tsx │ │ │ │ │ ├── page.tsx │ │ │ │ │ └── shared-form.tsx │ │ │ ├── hooks │ │ │ │ ├── form-context.tsx │ │ │ │ └── form.tsx │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── next-server-actions │ │ ├── .gitignore │ │ ├── README.md │ │ ├── next.config.mjs │ │ ├── package.json │ │ ├── src │ │ │ └── app │ │ │ │ ├── action.ts │ │ │ │ ├── client-component.tsx │ │ │ │ ├── layout.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── shared-code.ts │ │ └── tsconfig.json │ ├── query-integration │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── emblem-light.svg │ │ ├── src │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── remix │ │ ├── .gitignore │ │ ├── README.md │ │ ├── app │ │ │ ├── root.tsx │ │ │ └── routes │ │ │ │ └── _index │ │ │ │ └── route.tsx │ │ ├── package.json │ │ ├── public │ │ │ └── favicon.ico │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── simple │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── emblem-light.svg │ │ ├── src │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── standard-schema │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── emblem-light.svg │ │ ├── src │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── tanstack-start │ │ ├── .gitignore │ │ ├── README.md │ │ ├── app.config.ts │ │ ├── app │ │ │ ├── client.tsx │ │ │ ├── routeTree.gen.ts │ │ │ ├── router.tsx │ │ │ ├── routes │ │ │ │ ├── __root.tsx │ │ │ │ └── index.tsx │ │ │ ├── ssr.tsx │ │ │ └── utils │ │ │ │ ├── form-isomorphic.ts │ │ │ │ └── form.tsx │ │ ├── package.json │ │ └── tsconfig.json │ └── ui-libraries │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── postcss.config.cjs │ │ ├── src │ │ ├── MainComponent.tsx │ │ └── index.tsx │ │ ├── tsconfig.json │ │ └── vite.config.ts ├── solid │ ├── array │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.tsx │ │ │ └── vite-env.d.ts │ │ ├── tsconfig.json │ │ └── vite.config.ts │ └── simple │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ ├── index.tsx │ │ └── vite-env.d.ts │ │ ├── tsconfig.json │ │ └── vite.config.ts ├── svelte │ ├── array │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── App.svelte │ │ │ ├── main.ts │ │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ └── vite.config.ts │ └── simple │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ ├── App.svelte │ │ ├── FieldInfo.svelte │ │ ├── main.ts │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ └── vite.config.ts └── vue │ ├── array │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── main.ts │ │ ├── shims-vue.d.ts │ │ └── types.d.ts │ ├── tsconfig.json │ └── vite.config.ts │ └── simple │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ ├── App.vue │ ├── FieldInfo.vue │ ├── main.ts │ ├── shims-vue.d.ts │ └── types.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── knip.json ├── media └── repo-header.png ├── nx.json ├── package.json ├── packages ├── angular-form │ ├── README.md │ ├── eslint.config.js │ ├── ng-package.json │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── inject-form.ts │ │ ├── inject-store.ts │ │ └── tanstack-field.directive.ts │ ├── tests │ │ ├── test-setup.ts │ │ ├── test.component.spec.ts │ │ └── utils.ts │ ├── tsconfig.build.json │ ├── tsconfig.docs.json │ ├── tsconfig.json │ └── vite.config.ts ├── form-core │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ ├── FieldApi.ts │ │ ├── FormApi.ts │ │ ├── formOptions.ts │ │ ├── index.ts │ │ ├── mergeForm.ts │ │ ├── metaHelper.ts │ │ ├── standardSchemaValidator.ts │ │ ├── types.ts │ │ ├── util-types.ts │ │ └── utils.ts │ ├── tests │ │ ├── FieldApi.spec.ts │ │ ├── FieldApi.test-d.ts │ │ ├── FormApi.spec.ts │ │ ├── FormApi.test-d.ts │ │ ├── formOptions.spec.ts │ │ ├── formOptions.test-d.ts │ │ ├── mergeForm.spec.ts │ │ ├── standardSchemaValidator.spec.ts │ │ ├── standardSchemaValidator.test-d.ts │ │ ├── util-types.test-d.ts │ │ ├── utils.spec.ts │ │ └── utils.ts │ ├── tsconfig.docs.json │ ├── tsconfig.json │ └── vite.config.ts ├── lit-form │ ├── README.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ ├── index.ts │ │ └── tanstack-form-controller.ts │ ├── tests │ │ ├── simple.test.ts │ │ └── simple.ts │ ├── tsconfig.build.json │ ├── tsconfig.docs.json │ ├── tsconfig.json │ └── vite.config.ts ├── react-form │ ├── README.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ ├── createFormHook.tsx │ │ ├── index.ts │ │ ├── nextjs │ │ │ ├── createServerValidate.ts │ │ │ ├── error.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── remix │ │ │ ├── createServerValidate.ts │ │ │ ├── error.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── start │ │ │ ├── createServerValidate.tsx │ │ │ ├── error.ts │ │ │ ├── getFormData.tsx │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ ├── types.ts │ │ ├── useField.tsx │ │ ├── useForm.tsx │ │ ├── useIsomorphicLayoutEffect.ts │ │ └── useTransform.ts │ ├── tests │ │ ├── createFormHook.test-d.tsx │ │ ├── createFormHook.test.tsx │ │ ├── test-setup.ts │ │ ├── useField.test-d.tsx │ │ ├── useField.test.tsx │ │ ├── useForm.test-d.tsx │ │ ├── useForm.test.tsx │ │ ├── useTransform.test-d.tsx │ │ └── utils.ts │ ├── tsconfig.docs.json │ ├── tsconfig.json │ └── vite.config.ts ├── solid-form │ ├── README.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ ├── createField.tsx │ │ ├── createForm.tsx │ │ ├── index.tsx │ │ └── types.ts │ ├── tests │ │ ├── createField.test-d.tsx │ │ ├── createField.test.tsx │ │ ├── createForm.test.tsx │ │ ├── test-setup.ts │ │ └── utils.ts │ ├── tsconfig.build.json │ ├── tsconfig.docs.json │ ├── tsconfig.json │ └── vite.config.ts ├── svelte-form │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ ├── Field.svelte │ │ ├── Subscribe.svelte │ │ ├── createForm.svelte.ts │ │ ├── index.ts │ │ └── types.ts │ ├── svelte.config.js │ ├── tests │ │ ├── simple.svelte │ │ ├── simple.test.ts │ │ └── test-setup.ts │ ├── tsconfig.docs.json │ ├── tsconfig.json │ └── vite.config.ts └── vue-form │ ├── README.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ ├── index.ts │ ├── types.ts │ ├── useField.tsx │ └── useForm.tsx │ ├── tests │ ├── test-setup.ts │ ├── useField.test.tsx │ ├── useForm.test.tsx │ └── utils.ts │ ├── tsconfig.docs.json │ ├── tsconfig.json │ └── vite.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── scripts ├── generateDocs.js ├── publish.js ├── tsconfig.json └── verify-links.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto eol=lf 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [tannerlinsley, crutchcorn] 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: Feature Requests & Questions 4 | url: https://github.com/TanStack/form/discussions 5 | about: Please ask and answer questions here. 6 | - name: Community Chat 7 | url: https://discord.com/invite/WrRKjPJ 8 | about: A dedicated discord server hosted by Tanner Linsley 9 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "configMigration": true, 4 | "extends": [ 5 | "config:recommended", 6 | "group:allNonMajor", 7 | "schedule:weekly", 8 | ":approveMajorUpdates", 9 | ":automergeMinor", 10 | ":disablePeerDependencies", 11 | ":maintainLockFilesMonthly", 12 | ":semanticCommits", 13 | ":semanticCommitTypeAll(chore)" 14 | ], 15 | "ignorePresets": [":ignoreModulesAndTests"], 16 | "labels": ["dependencies"], 17 | "rangeStrategy": "bump", 18 | "postUpdateOptions": ["pnpmDedupe"], 19 | "ignoreDeps": [ 20 | "@types/node", 21 | "@types/react", 22 | "@types/react-dom", 23 | "node", 24 | "react", 25 | "react-dom", 26 | "typescript", 27 | "typescript49", 28 | "typescript50", 29 | "typescript51", 30 | "typescript52", 31 | "typescript53", 32 | "vue", 33 | "vue-tsc" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /.github/workflows/autofix.yml: -------------------------------------------------------------------------------- 1 | name: autofix.ci # needed to securely identify the workflow 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: [main, alpha, beta] 7 | workflow_dispatch: 8 | inputs: 9 | generate-docs: 10 | description: 'Generate docs' 11 | required: false 12 | default: false 13 | type: boolean 14 | 15 | concurrency: 16 | group: ${{ github.workflow }}-${{ github.event.number || github.ref }} 17 | cancel-in-progress: true 18 | 19 | permissions: 20 | contents: read 21 | 22 | jobs: 23 | autofix: 24 | if: ${{ !contains(github.event.head_commit.message, 'apply automated fixes') }} 25 | name: autofix 26 | runs-on: ubuntu-latest 27 | steps: 28 | - name: Checkout 29 | uses: actions/checkout@v4.2.2 30 | - name: Setup Tools 31 | uses: tanstack/config/.github/setup@main 32 | - name: Fix formatting 33 | run: pnpm prettier:write 34 | - name: Generate Docs 35 | if: ${{ github.event_name == 'push' || github.event.inputs.generate-docs == true }} 36 | run: pnpm docs:generate 37 | - name: Apply fixes 38 | uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef 39 | with: 40 | commit-message: 'ci: apply automated fixes and generate docs' 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | package-lock.json 7 | yarn.lock 8 | 9 | # builds 10 | build 11 | coverage 12 | dist 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | .next 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .history 27 | size-plugin.json 28 | stats-hydration.json 29 | stats.json 30 | stats.html 31 | .vscode/settings.json 32 | 33 | *.log 34 | .cache 35 | .idea 36 | .nx/cache 37 | .nx/workspace-data 38 | .pnpm-store 39 | .tsup 40 | .svelte-kit 41 | 42 | vite.config.js.timestamp-* 43 | vite.config.ts.timestamp-* 44 | tsconfig.vitest-temp.json 45 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | link-workspace-packages=true 2 | prefer-workspace-packages=true 3 | provenance=true 4 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 22.12.0 2 | -------------------------------------------------------------------------------- /.nx/workflows/dynamic-changesets.yaml: -------------------------------------------------------------------------------- 1 | distribute-on: 2 | small-changeset: 3 linux-medium-js 3 | medium-changeset: 6 linux-medium-js 4 | large-changeset: 10 linux-medium-js 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/.next 2 | **/.nx/cache 3 | **/.svelte-kit 4 | **/build 5 | **/coverage 6 | **/dist 7 | **/docs/**/reference/** 8 | **/codemods/**/__testfixtures__ 9 | pnpm-lock.yaml 10 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-present Tanner Linsley 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | codecov: 2 | max_report_age: off 3 | coverage: 4 | status: 5 | project: 6 | default: 7 | target: auto 8 | threshold: 1% 9 | -------------------------------------------------------------------------------- /docs/assets/field-states-extended.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/form/488e3a7c9ab65981ae6ef588d0d3ef70c2a7cdca/docs/assets/field-states-extended.png -------------------------------------------------------------------------------- /docs/assets/field-states.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/form/488e3a7c9ab65981ae6ef588d0d3ef70c2a7cdca/docs/assets/field-states.png -------------------------------------------------------------------------------- /docs/framework/angular/reference/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "@tanstack/angular-form" 3 | title: "@tanstack/angular-form" 4 | --- 5 | 6 | 7 | 8 | # @tanstack/angular-form 9 | 10 | ## Classes 11 | 12 | - [TanStackField](../classes/tanstackfield.md) 13 | 14 | ## Functions 15 | 16 | - [injectForm](../functions/injectform.md) 17 | - [injectStore](../functions/injectstore.md) 18 | -------------------------------------------------------------------------------- /docs/framework/lit/reference/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "@tanstack/lit-form" 3 | title: "@tanstack/lit-form" 4 | --- 5 | 6 | 7 | 8 | # @tanstack/lit-form 9 | 10 | ## Classes 11 | 12 | - [TanStackFormController](../classes/tanstackformcontroller.md) 13 | -------------------------------------------------------------------------------- /docs/framework/react/community/tutorials.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: community-tutorials 3 | title: Community Tutorials 4 | --- 5 | 6 | This page is a collection of community-created tutorials, articles, and videos that can help you learn more about TanStack Form from other developers. If you created a resource that you would like to add to this list, please open a PR! We keep them in chronological order by publish date to ensure the most up to date content is at the top. 7 | 8 | > Please note that the content listed here is entirely community maintained. While it may not be fully aligned with official recommendations and best practices, it can still offer valuable insights and alternative perspectives. 9 | 10 | ## TanStack Form Tutorial - Best Form Library for React? 11 | 12 | [Watch Video](https://youtu.be/5oFQd-uAAHo) (March 7th, 2025) 13 | 14 | A tutorial from [Atharva Deosthale](https://links.atharva.codes) using TanStack Form in a Next.js project. The video is made for people who are just getting started with knowing TanStack Form and will cover client-side form validation and server-side form validation by taking advantage of the Form SDK. This tutorial expects you to have basic knowledge of working of React and client-server architectures. 15 | -------------------------------------------------------------------------------- /docs/framework/react/guides/react-native.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: react-native 3 | title: Usage with React Native 4 | --- 5 | 6 | TanStack Form is headless and it should support React Native out-of-the-box without needing any additional configuration. 7 | 8 | Here is an example: 9 | 10 | ```tsx 11 | 15 | val < 13 ? 'You must be 13 to make an account' : undefined, 16 | }} 17 | > 18 | {(field) => ( 19 | <> 20 | Age: 21 | 22 | {!field.state.meta.isValid && ( 23 | {field.state.meta.errors.join(', ')} 24 | )} 25 | 26 | )} 27 | 28 | ``` 29 | -------------------------------------------------------------------------------- /docs/framework/react/reference/functions/createformhookcontexts.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: createFormHookContexts 3 | title: createFormHookContexts 4 | --- 5 | 6 | 7 | 8 | # Function: createFormHookContexts() 9 | 10 | ```ts 11 | function createFormHookContexts(): object 12 | ``` 13 | 14 | Defined in: [packages/react-form/src/createFormHook.tsx:53](https://github.com/TanStack/form/blob/main/packages/react-form/src/createFormHook.tsx#L53) 15 | 16 | ## Returns 17 | 18 | `object` 19 | 20 | ### fieldContext 21 | 22 | ```ts 23 | fieldContext: Context; 24 | ``` 25 | 26 | ### formContext 27 | 28 | ```ts 29 | formContext: Context; 30 | ``` 31 | 32 | ### useFieldContext() 33 | 34 | ```ts 35 | useFieldContext: () => FieldApi; 36 | ``` 37 | 38 | #### Type Parameters 39 | 40 | • **TData** 41 | 42 | #### Returns 43 | 44 | `FieldApi`\<`any`, `string`, `TData`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\> 45 | 46 | ### useFormContext() 47 | 48 | ```ts 49 | useFormContext: () => ReactFormExtendedApi, any, any, any, any, any, any, any, any, any>; 50 | ``` 51 | 52 | #### Returns 53 | 54 | [`ReactFormExtendedApi`](../../type-aliases/reactformextendedapi.md)\<`Record`\<`string`, `never`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\> 55 | -------------------------------------------------------------------------------- /docs/framework/react/reference/functions/usestore.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useStore 3 | title: useStore 4 | --- 5 | 6 | 7 | 8 | # Function: useStore() 9 | 10 | ## Call Signature 11 | 12 | ```ts 13 | function useStore(store, selector?): TSelected 14 | ``` 15 | 16 | Defined in: node\_modules/.pnpm/@tanstack+react-store@0.7.1\_react-dom@19.1.0\_react@19.1.0\_\_react@19.1.0/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:7 17 | 18 | ### Type Parameters 19 | 20 | • **TState** 21 | 22 | • **TSelected** = `NoInfer`\<`TState`\> 23 | 24 | ### Parameters 25 | 26 | #### store 27 | 28 | `Store`\<`TState`, `any`\> 29 | 30 | #### selector? 31 | 32 | (`state`) => `TSelected` 33 | 34 | ### Returns 35 | 36 | `TSelected` 37 | 38 | ## Call Signature 39 | 40 | ```ts 41 | function useStore(store, selector?): TSelected 42 | ``` 43 | 44 | Defined in: node\_modules/.pnpm/@tanstack+react-store@0.7.1\_react-dom@19.1.0\_react@19.1.0\_\_react@19.1.0/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:8 45 | 46 | ### Type Parameters 47 | 48 | • **TState** 49 | 50 | • **TSelected** = `NoInfer`\<`TState`\> 51 | 52 | ### Parameters 53 | 54 | #### store 55 | 56 | `Derived`\<`TState`, `any`\> 57 | 58 | #### selector? 59 | 60 | (`state`) => `TSelected` 61 | 62 | ### Returns 63 | 64 | `TSelected` 65 | -------------------------------------------------------------------------------- /docs/framework/react/reference/functions/usetransform.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useTransform 3 | title: useTransform 4 | --- 5 | 6 | 7 | 8 | # Function: useTransform() 9 | 10 | ```ts 11 | function useTransform(fn, deps): FormTransform 12 | ``` 13 | 14 | Defined in: [packages/react-form/src/useTransform.ts:9](https://github.com/TanStack/form/blob/main/packages/react-form/src/useTransform.ts#L9) 15 | 16 | ## Parameters 17 | 18 | ### fn 19 | 20 | (`formBase`) => `AnyFormApi` 21 | 22 | ### deps 23 | 24 | `unknown`[] 25 | 26 | ## Returns 27 | 28 | `FormTransform`\<`any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\> 29 | -------------------------------------------------------------------------------- /docs/framework/react/reference/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "@tanstack/react-form" 3 | title: "@tanstack/react-form" 4 | --- 5 | 6 | 7 | 8 | # @tanstack/react-form 9 | 10 | ## Interfaces 11 | 12 | - [ReactFormApi](../interfaces/reactformapi.md) 13 | - [WithFormProps](../interfaces/withformprops.md) 14 | 15 | ## Type Aliases 16 | 17 | - [FieldComponent](../type-aliases/fieldcomponent.md) 18 | - [ReactFormExtendedApi](../type-aliases/reactformextendedapi.md) 19 | - [UseField](../type-aliases/usefield.md) 20 | 21 | ## Functions 22 | 23 | - [createFormHook](../functions/createformhook.md) 24 | - [createFormHookContexts](../functions/createformhookcontexts.md) 25 | - [Field](../functions/field.md) 26 | - [useField](../functions/usefield.md) 27 | - [useForm](../functions/useform.md) 28 | - [useStore](../functions/usestore.md) 29 | - [useTransform](../functions/usetransform.md) 30 | -------------------------------------------------------------------------------- /docs/framework/solid/quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: quick-start 3 | title: Quick Start 4 | --- 5 | 6 | The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet. 7 | 8 | ```tsx 9 | import { createForm } from '@tanstack/solid-form' 10 | 11 | function App() { 12 | const form = createForm(() => ({ 13 | defaultValues: { 14 | fullName: '', 15 | }, 16 | onSubmit: async ({ value }) => { 17 | // Do something with form data 18 | console.log(value) 19 | }, 20 | })) 21 | 22 | return ( 23 |
24 |

Simple Form Example

25 |
{ 27 | e.preventDefault() 28 | e.stopPropagation() 29 | form.handleSubmit() 30 | }} 31 | > 32 |
33 | ( 36 | field().handleChange(e.target.value)} 41 | /> 42 | )} 43 | /> 44 |
45 | 46 |
47 |
48 | ) 49 | } 50 | ``` 51 | 52 | From here, you'll be ready to explore all of the other features of TanStack Form! 53 | -------------------------------------------------------------------------------- /docs/framework/solid/reference/functions/usestore.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useStore 3 | title: useStore 4 | --- 5 | 6 | 7 | 8 | # Function: useStore() 9 | 10 | ## Call Signature 11 | 12 | ```ts 13 | function useStore(store, selector?): Accessor 14 | ``` 15 | 16 | Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.1\_solid-js@1.9.7/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:8 17 | 18 | ### Type Parameters 19 | 20 | • **TState** 21 | 22 | • **TSelected** = `NoInfer`\<`TState`\> 23 | 24 | ### Parameters 25 | 26 | #### store 27 | 28 | `Store`\<`TState`, `any`\> 29 | 30 | #### selector? 31 | 32 | (`state`) => `TSelected` 33 | 34 | ### Returns 35 | 36 | `Accessor`\<`TSelected`\> 37 | 38 | ## Call Signature 39 | 40 | ```ts 41 | function useStore(store, selector?): Accessor 42 | ``` 43 | 44 | Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.1\_solid-js@1.9.7/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:9 45 | 46 | ### Type Parameters 47 | 48 | • **TState** 49 | 50 | • **TSelected** = `NoInfer`\<`TState`\> 51 | 52 | ### Parameters 53 | 54 | #### store 55 | 56 | `Derived`\<`TState`, `any`\> 57 | 58 | #### selector? 59 | 60 | (`state`) => `TSelected` 61 | 62 | ### Returns 63 | 64 | `Accessor`\<`TSelected`\> 65 | -------------------------------------------------------------------------------- /docs/framework/solid/reference/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "@tanstack/solid-form" 3 | title: "@tanstack/solid-form" 4 | --- 5 | 6 | 7 | 8 | # @tanstack/solid-form 9 | 10 | ## Interfaces 11 | 12 | - [SolidFormApi](../interfaces/solidformapi.md) 13 | 14 | ## Type Aliases 15 | 16 | - [CreateField](../type-aliases/createfield.md) 17 | - [FieldComponent](../type-aliases/fieldcomponent.md) 18 | 19 | ## Functions 20 | 21 | - [createField](../functions/createfield.md) 22 | - [createForm](../functions/createform.md) 23 | - [Field](../functions/field.md) 24 | - [useStore](../functions/usestore.md) 25 | -------------------------------------------------------------------------------- /docs/framework/svelte/quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: quick-start 3 | title: Quick Start 4 | --- 5 | 6 | The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet. 7 | 8 | ```svelte 9 | 22 | 23 |
24 |

Simple Form Example

25 |
{ 27 | e.preventDefault() 28 | e.stopPropagation() 29 | form.handleSubmit() 30 | }} 31 | > 32 |
33 | 34 | {#snippet children(field)} 35 | field.handleChange(e.target.value)} 40 | /> 41 | {/snippet} 42 | 43 |
44 | 45 |
46 |
47 | ``` 48 | 49 | From here, you'll be ready to explore all of the other features of TanStack Form! 50 | -------------------------------------------------------------------------------- /docs/framework/vue/quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: quick-start 3 | title: Quick Start 4 | --- 5 | 6 | The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet. 7 | 8 | ```vue 9 | 10 | 23 | 24 | 43 | ``` 44 | 45 | From here, you'll be ready to explore all of the other features of TanStack Form! 46 | -------------------------------------------------------------------------------- /docs/framework/vue/reference/functions/usestore.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useStore 3 | title: useStore 4 | --- 5 | 6 | 7 | 8 | # Function: useStore() 9 | 10 | ## Call Signature 11 | 12 | ```ts 13 | function useStore(store, selector?): Readonly> 14 | ``` 15 | 16 | Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.7.1\_vue@3.5.16\_typescript@5.8.3\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:8 17 | 18 | ### Type Parameters 19 | 20 | • **TState** 21 | 22 | • **TSelected** = `NoInfer`\<`TState`\> 23 | 24 | ### Parameters 25 | 26 | #### store 27 | 28 | `Store`\<`TState`, `any`\> 29 | 30 | #### selector? 31 | 32 | (`state`) => `TSelected` 33 | 34 | ### Returns 35 | 36 | `Readonly`\<`Ref`\<`TSelected`, `TSelected`\>\> 37 | 38 | ## Call Signature 39 | 40 | ```ts 41 | function useStore(store, selector?): Readonly> 42 | ``` 43 | 44 | Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.7.1\_vue@3.5.16\_typescript@5.8.3\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:9 45 | 46 | ### Type Parameters 47 | 48 | • **TState** 49 | 50 | • **TSelected** = `NoInfer`\<`TState`\> 51 | 52 | ### Parameters 53 | 54 | #### store 55 | 56 | `Derived`\<`TState`, `any`\> 57 | 58 | #### selector? 59 | 60 | (`state`) => `TSelected` 61 | 62 | ### Returns 63 | 64 | `Readonly`\<`Ref`\<`TSelected`, `TSelected`\>\> 65 | -------------------------------------------------------------------------------- /docs/framework/vue/reference/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "@tanstack/vue-form" 3 | title: "@tanstack/vue-form" 4 | --- 5 | 6 | 7 | 8 | # @tanstack/vue-form 9 | 10 | ## Interfaces 11 | 12 | - [VueFieldApi](../interfaces/vuefieldapi.md) 13 | - [VueFormApi](../interfaces/vueformapi.md) 14 | 15 | ## Type Aliases 16 | 17 | - [FieldComponent](../type-aliases/fieldcomponent.md) 18 | - [FieldComponentBoundProps](../type-aliases/fieldcomponentboundprops.md) 19 | - [FieldComponentProps](../type-aliases/fieldcomponentprops.md) 20 | - [UseField](../type-aliases/usefield.md) 21 | 22 | ## Variables 23 | 24 | - [Field](../variables/field.md) 25 | 26 | ## Functions 27 | 28 | - [useField](../functions/usefield.md) 29 | - [useForm](../functions/useform.md) 30 | - [useStore](../functions/usestore.md) 31 | -------------------------------------------------------------------------------- /docs/framework/vue/reference/interfaces/vuefieldapi.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: VueFieldApi 3 | title: VueFieldApi 4 | --- 5 | 6 | 7 | 8 | # Interface: VueFieldApi\ 9 | 10 | Defined in: [packages/vue-form/src/useField.tsx:140](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L140) 11 | 12 | ## Type Parameters 13 | 14 | • **TParentData** 15 | 16 | • **TFormOnMount** *extends* `undefined` \| `FormValidateOrFn`\<`TParentData`\> 17 | 18 | • **TFormOnChange** *extends* `undefined` \| `FormValidateOrFn`\<`TParentData`\> 19 | 20 | • **TFormOnChangeAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TParentData`\> 21 | 22 | • **TFormOnBlur** *extends* `undefined` \| `FormValidateOrFn`\<`TParentData`\> 23 | 24 | • **TFormOnBlurAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TParentData`\> 25 | 26 | • **TFormOnSubmit** *extends* `undefined` \| `FormValidateOrFn`\<`TParentData`\> 27 | 28 | • **TFormOnSubmitAsync** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TParentData`\> 29 | 30 | • **TFormOnServer** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`TParentData`\> 31 | 32 | • **TParentSubmitMeta** 33 | 34 | ## Properties 35 | 36 | ### Field 37 | 38 | ```ts 39 | Field: FieldComponent; 40 | ``` 41 | 42 | Defined in: [packages/vue-form/src/useField.tsx:152](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L152) 43 | -------------------------------------------------------------------------------- /docs/reference/functions/evaluate.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: evaluate 3 | title: evaluate 4 | --- 5 | 6 | 7 | 8 | # Function: evaluate() 9 | 10 | ```ts 11 | function evaluate(objA, objB): boolean 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/utils.ts:345](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L345) 15 | 16 | ## Type Parameters 17 | 18 | • **T** 19 | 20 | ## Parameters 21 | 22 | ### objA 23 | 24 | `T` 25 | 26 | ### objB 27 | 28 | `T` 29 | 30 | ## Returns 31 | 32 | `boolean` 33 | -------------------------------------------------------------------------------- /docs/reference/functions/formoptions.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: formOptions 3 | title: formOptions 4 | --- 5 | 6 | 7 | 8 | # Function: formOptions() 9 | 10 | ```ts 11 | function formOptions(defaultOpts): T 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/formOptions.ts:3](https://github.com/TanStack/form/blob/main/packages/form-core/src/formOptions.ts#L3) 15 | 16 | ## Type Parameters 17 | 18 | • **T** *extends* `Partial`\<[`FormOptions`](../../interfaces/formoptions.md)\<`any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>\> 19 | 20 | ## Parameters 21 | 22 | ### defaultOpts 23 | 24 | `T` 25 | 26 | ## Returns 27 | 28 | `T` 29 | -------------------------------------------------------------------------------- /docs/reference/functions/isglobalformvalidationerror.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: isGlobalFormValidationError 3 | title: isGlobalFormValidationError 4 | --- 5 | 6 | 7 | 8 | # Function: isGlobalFormValidationError() 9 | 10 | ```ts 11 | function isGlobalFormValidationError(error): error is GlobalFormValidationError 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/utils.ts:339](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L339) 15 | 16 | ## Parameters 17 | 18 | ### error 19 | 20 | `unknown` 21 | 22 | ## Returns 23 | 24 | `error is GlobalFormValidationError` 25 | -------------------------------------------------------------------------------- /docs/reference/functions/isstandardschemavalidator.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: isStandardSchemaValidator 3 | title: isStandardSchemaValidator 4 | --- 5 | 6 | 7 | 8 | # Function: isStandardSchemaValidator() 9 | 10 | ```ts 11 | function isStandardSchemaValidator(validator): validator is StandardSchemaV1 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/standardSchemaValidator.ts:90](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L90) 15 | 16 | ## Parameters 17 | 18 | ### validator 19 | 20 | `unknown` 21 | 22 | ## Returns 23 | 24 | `validator is StandardSchemaV1` 25 | -------------------------------------------------------------------------------- /docs/reference/functions/mergeform.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: mergeForm 3 | title: mergeForm 4 | --- 5 | 6 | 7 | 8 | # Function: mergeForm() 9 | 10 | ```ts 11 | function mergeForm(baseForm, state): FormApi, any, any, any, any, any, any, any, any, any> 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/mergeForm.ts:73](https://github.com/TanStack/form/blob/main/packages/form-core/src/mergeForm.ts#L73) 15 | 16 | ## Type Parameters 17 | 18 | • **TFormData** 19 | 20 | ## Parameters 21 | 22 | ### baseForm 23 | 24 | [`FormApi`](../../classes/formapi.md)\<`NoInfer`\<`TFormData`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\> 25 | 26 | ### state 27 | 28 | `Partial`\<[`FormState`](../../interfaces/formstate.md)\<`TFormData`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\>\> 29 | 30 | ## Returns 31 | 32 | [`FormApi`](../../classes/formapi.md)\<`NoInfer`\<`TFormData`\>, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\> 33 | -------------------------------------------------------------------------------- /docs/reference/interfaces/anydeepkeyandvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AnyDeepKeyAndValue 3 | title: AnyDeepKeyAndValue 4 | --- 5 | 6 | 7 | 8 | # Interface: AnyDeepKeyAndValue\ 9 | 10 | Defined in: [packages/form-core/src/util-types.ts:22](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L22) 11 | 12 | ## Extended by 13 | 14 | - [`ArrayDeepKeyAndValue`](../arraydeepkeyandvalue.md) 15 | - [`TupleDeepKeyAndValue`](../tupledeepkeyandvalue.md) 16 | - [`ObjectDeepKeyAndValue`](../objectdeepkeyandvalue.md) 17 | - [`UnknownDeepKeyAndValue`](../unknowndeepkeyandvalue.md) 18 | 19 | ## Type Parameters 20 | 21 | • **K** *extends* `string` = `string` 22 | 23 | • **V** *extends* `any` = `any` 24 | 25 | ## Properties 26 | 27 | ### key 28 | 29 | ```ts 30 | key: K; 31 | ``` 32 | 33 | Defined in: [packages/form-core/src/util-types.ts:26](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L26) 34 | 35 | *** 36 | 37 | ### value 38 | 39 | ```ts 40 | value: V; 41 | ``` 42 | 43 | Defined in: [packages/form-core/src/util-types.ts:27](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L27) 44 | -------------------------------------------------------------------------------- /docs/reference/interfaces/arraydeepkeyandvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ArrayDeepKeyAndValue 3 | title: ArrayDeepKeyAndValue 4 | --- 5 | 6 | 7 | 8 | # Interface: ArrayDeepKeyAndValue\ 9 | 10 | Defined in: [packages/form-core/src/util-types.ts:33](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L33) 11 | 12 | ## Extends 13 | 14 | - [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 19 | 20 | • **T** *extends* `ReadonlyArray`\<`any`\> 21 | 22 | ## Properties 23 | 24 | ### key 25 | 26 | ```ts 27 | key: `${TParent["key"] extends never ? "" : TParent["key"]}[${number}]`; 28 | ``` 29 | 30 | Defined in: [packages/form-core/src/util-types.ts:37](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L37) 31 | 32 | #### Overrides 33 | 34 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`key`](../AnyDeepKeyAndValue.md#key) 35 | 36 | *** 37 | 38 | ### value 39 | 40 | ```ts 41 | value: 42 | | T[number] 43 | | Nullable; 44 | ``` 45 | 46 | Defined in: [packages/form-core/src/util-types.ts:38](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L38) 47 | 48 | #### Overrides 49 | 50 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`value`](../AnyDeepKeyAndValue.md#value) 51 | -------------------------------------------------------------------------------- /docs/reference/interfaces/objectdeepkeyandvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ObjectDeepKeyAndValue 3 | title: ObjectDeepKeyAndValue 4 | --- 5 | 6 | 7 | 8 | # Interface: ObjectDeepKeyAndValue\ 9 | 10 | Defined in: [packages/form-core/src/util-types.ts:97](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L97) 11 | 12 | ## Extends 13 | 14 | - [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 19 | 20 | • **T** 21 | 22 | • **TKey** *extends* [`AllObjectKeys`](../../type-aliases/allobjectkeys.md)\<`T`\> 23 | 24 | ## Properties 25 | 26 | ### key 27 | 28 | ```ts 29 | key: ObjectAccessor; 30 | ``` 31 | 32 | Defined in: [packages/form-core/src/util-types.ts:102](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L102) 33 | 34 | #### Overrides 35 | 36 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`key`](../AnyDeepKeyAndValue.md#key) 37 | 38 | *** 39 | 40 | ### value 41 | 42 | ```ts 43 | value: ObjectValue; 44 | ``` 45 | 46 | Defined in: [packages/form-core/src/util-types.ts:103](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L103) 47 | 48 | #### Overrides 49 | 50 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`value`](../AnyDeepKeyAndValue.md#value) 51 | -------------------------------------------------------------------------------- /docs/reference/interfaces/standardschemav1issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: StandardSchemaV1Issue 3 | title: StandardSchemaV1Issue 4 | --- 5 | 6 | 7 | 8 | # Interface: StandardSchemaV1Issue 9 | 10 | Defined in: [packages/form-core/src/standardSchemaValidator.ts:159](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L159) 11 | 12 | The issue interface of the failure output. 13 | 14 | ## Properties 15 | 16 | ### message 17 | 18 | ```ts 19 | readonly message: string; 20 | ``` 21 | 22 | Defined in: [packages/form-core/src/standardSchemaValidator.ts:163](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L163) 23 | 24 | The error message of the issue. 25 | 26 | *** 27 | 28 | ### path? 29 | 30 | ```ts 31 | readonly optional path: readonly (PropertyKey | StandardSchemaV1PathSegment)[]; 32 | ``` 33 | 34 | Defined in: [packages/form-core/src/standardSchemaValidator.ts:167](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L167) 35 | 36 | The path of the issue, if any. 37 | -------------------------------------------------------------------------------- /docs/reference/interfaces/tupledeepkeyandvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: TupleDeepKeyAndValue 3 | title: TupleDeepKeyAndValue 4 | --- 5 | 6 | 7 | 8 | # Interface: TupleDeepKeyAndValue\ 9 | 10 | Defined in: [packages/form-core/src/util-types.ts:56](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L56) 11 | 12 | ## Extends 13 | 14 | - [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 19 | 20 | • **T** 21 | 22 | • **TKey** *extends* [`AllTupleKeys`](../../type-aliases/alltuplekeys.md)\<`T`\> 23 | 24 | ## Properties 25 | 26 | ### key 27 | 28 | ```ts 29 | key: `${TParent["key"] extends never ? "" : TParent["key"]}[${TKey}]`; 30 | ``` 31 | 32 | Defined in: [packages/form-core/src/util-types.ts:61](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L61) 33 | 34 | #### Overrides 35 | 36 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`key`](../AnyDeepKeyAndValue.md#key) 37 | 38 | *** 39 | 40 | ### value 41 | 42 | ```ts 43 | value: 44 | | T[TKey] 45 | | Nullable; 46 | ``` 47 | 48 | Defined in: [packages/form-core/src/util-types.ts:62](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L62) 49 | 50 | #### Overrides 51 | 52 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`value`](../AnyDeepKeyAndValue.md#value) 53 | -------------------------------------------------------------------------------- /docs/reference/interfaces/unknowndeepkeyandvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: UnknownDeepKeyAndValue 3 | title: UnknownDeepKeyAndValue 4 | --- 5 | 6 | 7 | 8 | # Interface: UnknownDeepKeyAndValue\ 9 | 10 | Defined in: [packages/form-core/src/util-types.ts:122](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L122) 11 | 12 | ## Extends 13 | 14 | - [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md) 19 | 20 | ## Properties 21 | 22 | ### key 23 | 24 | ```ts 25 | key: UnknownAccessor; 26 | ``` 27 | 28 | Defined in: [packages/form-core/src/util-types.ts:124](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L124) 29 | 30 | #### Overrides 31 | 32 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`key`](../AnyDeepKeyAndValue.md#key) 33 | 34 | *** 35 | 36 | ### value 37 | 38 | ```ts 39 | value: unknown; 40 | ``` 41 | 42 | Defined in: [packages/form-core/src/util-types.ts:125](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L125) 43 | 44 | #### Overrides 45 | 46 | [`AnyDeepKeyAndValue`](../anydeepkeyandvalue.md).[`value`](../AnyDeepKeyAndValue.md#value) 47 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/allobjectkeys.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AllObjectKeys 3 | title: AllObjectKeys 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AllObjectKeys\ 9 | 10 | ```ts 11 | type AllObjectKeys = T extends any ? keyof T & string | number : never; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:80](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L80) 15 | 16 | ## Type Parameters 17 | 18 | • **T** 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/alltuplekeys.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AllTupleKeys 3 | title: AllTupleKeys 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AllTupleKeys\ 9 | 10 | ```ts 11 | type AllTupleKeys = T extends any ? keyof T & `${number}` : never; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:65](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L65) 15 | 16 | ## Type Parameters 17 | 18 | • **T** 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/anyfieldapi.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AnyFieldApi 3 | title: AnyFieldApi 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AnyFieldApi 9 | 10 | ```ts 11 | type AnyFieldApi = FieldApi; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FieldApi.ts:832](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L832) 15 | 16 | A type representing the Field API with all generics set to `any` for convenience. 17 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/anyfieldmeta.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AnyFieldMeta 3 | title: AnyFieldMeta 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AnyFieldMeta 9 | 10 | ```ts 11 | type AnyFieldMeta = FieldMeta; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FieldApi.ts:751](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L751) 15 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/anyfieldmetabase.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AnyFieldMetaBase 3 | title: AnyFieldMetaBase 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AnyFieldMetaBase 9 | 10 | ```ts 11 | type AnyFieldMetaBase = FieldMetaBase; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FieldApi.ts:580](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L580) 15 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/anyfieldmetaderived.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AnyFieldMetaDerived 3 | title: AnyFieldMetaDerived 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AnyFieldMetaDerived 9 | 10 | ```ts 11 | type AnyFieldMetaDerived = FieldMetaDerived; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FieldApi.ts:665](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L665) 15 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/anyformapi.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AnyFormApi 3 | title: AnyFormApi 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AnyFormApi 9 | 10 | ```ts 11 | type AnyFormApi = FormApi; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:751](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L751) 15 | 16 | A type representing the Form API with all generics set to `any` for convenience. 17 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/anyformstate.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: AnyFormState 3 | title: AnyFormState 4 | --- 5 | 6 | 7 | 8 | # Type Alias: AnyFormState 9 | 10 | ```ts 11 | type AnyFormState = FormState; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:680](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L680) 15 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/arrayaccessor.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ArrayAccessor 3 | title: ArrayAccessor 4 | --- 5 | 6 | 7 | 8 | # Type Alias: ArrayAccessor\ 9 | 10 | ```ts 11 | type ArrayAccessor = `${TParent["key"] extends never ? "" : TParent["key"]}[${number}]`; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:30](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L30) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepkeyandvaluearray.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepKeyAndValueArray 3 | title: DeepKeyAndValueArray 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepKeyAndValueArray\ 9 | 10 | ```ts 11 | type DeepKeyAndValueArray = DeepKeysAndValuesImpl, ArrayDeepKeyAndValue, 12 | | TAcc 13 | | ArrayDeepKeyAndValue>; 14 | ``` 15 | 16 | Defined in: [packages/form-core/src/util-types.ts:41](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L41) 17 | 18 | ## Type Parameters 19 | 20 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 21 | 22 | • **T** *extends* `ReadonlyArray`\<`any`\> 23 | 24 | • **TAcc** 25 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepkeyandvalueobject.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepKeyAndValueObject 3 | title: DeepKeyAndValueObject 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepKeyAndValueObject\ 9 | 10 | ```ts 11 | type DeepKeyAndValueObject = TAllKeys extends any ? DeepKeysAndValuesImpl, ObjectDeepKeyAndValue, 12 | | TAcc 13 | | ObjectDeepKeyAndValue> : never; 14 | ``` 15 | 16 | Defined in: [packages/form-core/src/util-types.ts:106](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L106) 17 | 18 | ## Type Parameters 19 | 20 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 21 | 22 | • **T** 23 | 24 | • **TAcc** 25 | 26 | • **TAllKeys** *extends* [`AllObjectKeys`](../allobjectkeys.md)\<`T`\> = [`AllObjectKeys`](../allobjectkeys.md)\<`T`\> 27 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepkeyandvaluetuple.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepKeyAndValueTuple 3 | title: DeepKeyAndValueTuple 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepKeyAndValueTuple\ 9 | 10 | ```ts 11 | type DeepKeyAndValueTuple = TAllKeys extends any ? DeepKeysAndValuesImpl, TupleDeepKeyAndValue, 12 | | TAcc 13 | | TupleDeepKeyAndValue> : never; 14 | ``` 15 | 16 | Defined in: [packages/form-core/src/util-types.ts:67](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L67) 17 | 18 | ## Type Parameters 19 | 20 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 21 | 22 | • **T** *extends* `ReadonlyArray`\<`any`\> 23 | 24 | • **TAcc** 25 | 26 | • **TAllKeys** *extends* [`AllTupleKeys`](../alltuplekeys.md)\<`T`\> = [`AllTupleKeys`](../alltuplekeys.md)\<`T`\> 27 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepkeys.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepKeys 3 | title: DeepKeys 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepKeys\ 9 | 10 | ```ts 11 | type DeepKeys = unknown extends T ? string : DeepKeysAndValues["key"]; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:160](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L160) 15 | 16 | The keys of an object or array, deeply nested. 17 | 18 | ## Type Parameters 19 | 20 | • **T** 21 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepkeysandvalues.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepKeysAndValues 3 | title: DeepKeysAndValues 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepKeysAndValues\ 9 | 10 | ```ts 11 | type DeepKeysAndValues = DeepKeysAndValuesImpl extends AnyDeepKeyAndValue ? DeepKeysAndValuesImpl : never; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:128](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L128) 15 | 16 | ## Type Parameters 17 | 18 | • **T** 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepkeysandvaluesimpl.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepKeysAndValuesImpl 3 | title: DeepKeysAndValuesImpl 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepKeysAndValuesImpl\ 9 | 10 | ```ts 11 | type DeepKeysAndValuesImpl = unknown extends T ? 12 | | TAcc 13 | | UnknownDeepKeyAndValue : unknown extends T ? T : T extends string | number | boolean | bigint | Date ? TAcc : T extends ReadonlyArray ? number extends T["length"] ? DeepKeyAndValueArray : DeepKeyAndValueTuple : keyof T extends never ? 14 | | TAcc 15 | | UnknownDeepKeyAndValue : T extends object ? DeepKeyAndValueObject : TAcc; 16 | ``` 17 | 18 | Defined in: [packages/form-core/src/util-types.ts:133](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L133) 19 | 20 | ## Type Parameters 21 | 22 | • **T** 23 | 24 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) = `never` 25 | 26 | • **TAcc** = `never` 27 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepkeysoftype.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepKeysOfType 3 | title: DeepKeysOfType 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepKeysOfType\ 9 | 10 | ```ts 11 | type DeepKeysOfType = Extract, AnyDeepKeyAndValue>["key"]; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:176](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L176) 15 | 16 | The keys of an object or array, deeply nested and only with a value of TValue 17 | 18 | ## Type Parameters 19 | 20 | • **TData** 21 | 22 | • **TValue** 23 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deeprecord.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepRecord 3 | title: DeepRecord 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepRecord\ 9 | 10 | ```ts 11 | type DeepRecord = { [TRecord in DeepKeysAndValues as TRecord["key"]]: TRecord["value"] }; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:153](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L153) 15 | 16 | ## Type Parameters 17 | 18 | • **T** 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/deepvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DeepValue 3 | title: DeepValue 4 | --- 5 | 6 | 7 | 8 | # Type Alias: DeepValue\ 9 | 10 | ```ts 11 | type DeepValue = unknown extends TValue ? TValue : TAccessor extends DeepKeys ? DeepRecord[TAccessor] : never; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:167](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L167) 15 | 16 | Infer the type of a deeply nested property within an object or an array. 17 | 18 | ## Type Parameters 19 | 20 | • **TValue** 21 | 22 | • **TAccessor** 23 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/fieldinfo.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: FieldInfo 3 | title: FieldInfo 4 | --- 5 | 6 | 7 | 8 | # Type Alias: FieldInfo\ 9 | 10 | ```ts 11 | type FieldInfo = object; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:464](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L464) 15 | 16 | An object representing the field information for a specific field within the form. 17 | 18 | ## Type Parameters 19 | 20 | • **TFormData** 21 | 22 | ## Type declaration 23 | 24 | ### instance 25 | 26 | ```ts 27 | instance: 28 | | FieldApi 29 | | null; 30 | ``` 31 | 32 | An instance of the FieldAPI. 33 | 34 | ### validationMetaMap 35 | 36 | ```ts 37 | validationMetaMap: Record; 38 | ``` 39 | 40 | A record of field validation internal handling. 41 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/formvalidatefn.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: FormValidateFn 3 | title: FormValidateFn 4 | --- 5 | 6 | 7 | 8 | # Type Alias: FormValidateFn()\ 9 | 10 | ```ts 11 | type FormValidateFn = (props) => unknown; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:71](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L71) 15 | 16 | ## Type Parameters 17 | 18 | • **TFormData** 19 | 20 | ## Parameters 21 | 22 | ### props 23 | 24 | #### formApi 25 | 26 | [`FormApi`](../../classes/formapi.md)\<`TFormData`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`\> 27 | 28 | #### value 29 | 30 | `TFormData` 31 | 32 | ## Returns 33 | 34 | `unknown` 35 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/formvalidationerror.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: FormValidationError 3 | title: FormValidationError 4 | --- 5 | 6 | 7 | 8 | # Type Alias: FormValidationError\ 9 | 10 | ```ts 11 | type FormValidationError = 12 | | ValidationError 13 | | GlobalFormValidationError; 14 | ``` 15 | 16 | Defined in: [packages/form-core/src/types.ts:84](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L84) 17 | 18 | ## Type Parameters 19 | 20 | • **TFormData** 21 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/formvalidator.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: FormValidator 3 | title: FormValidator 4 | --- 5 | 6 | 7 | 8 | # Type Alias: FormValidator\ 9 | 10 | ```ts 11 | type FormValidator = object; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:126](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L126) 15 | 16 | ## Type Parameters 17 | 18 | • **TFormData** 19 | 20 | • **TType** 21 | 22 | • **TFn** = `unknown` 23 | 24 | ## Type declaration 25 | 26 | ### validate() 27 | 28 | #### Parameters 29 | 30 | ##### options 31 | 32 | ###### value 33 | 34 | `TType` 35 | 36 | ##### fn 37 | 38 | `TFn` 39 | 40 | #### Returns 41 | 42 | `unknown` 43 | 44 | ### validateAsync() 45 | 46 | #### Parameters 47 | 48 | ##### options 49 | 50 | ###### value 51 | 52 | `TType` 53 | 54 | ##### fn 55 | 56 | `TFn` 57 | 58 | #### Returns 59 | 60 | `Promise`\<`unknown`\> 61 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/nullable.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Nullable 3 | title: Nullable 4 | --- 5 | 6 | 7 | 8 | # Type Alias: Nullable\ 9 | 10 | ```ts 11 | type Nullable = T & undefined | null; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:89](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L89) 15 | 16 | ## Type Parameters 17 | 18 | • **T** 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/objectaccessor.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ObjectAccessor 3 | title: ObjectAccessor 4 | --- 5 | 6 | 7 | 8 | # Type Alias: ObjectAccessor\ 9 | 10 | ```ts 11 | type ObjectAccessor = TParent["key"] extends never ? `${TKey}` : `${TParent["key"]}.${TKey}`; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:84](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L84) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 19 | 20 | • **TKey** *extends* `string` \| `number` 21 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/objectvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ObjectValue 3 | title: ObjectValue 4 | --- 5 | 6 | 7 | 8 | # Type Alias: ObjectValue\ 9 | 10 | ```ts 11 | type ObjectValue = T[TKey] | Nullable; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:91](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L91) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 19 | 20 | • **T** 21 | 22 | • **TKey** *extends* [`AllObjectKeys`](../allobjectkeys.md)\<`T`\> 23 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/standardschemav1.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: StandardSchemaV1 3 | title: StandardSchemaV1 4 | --- 5 | 6 | 7 | 8 | # Type Alias: StandardSchemaV1\ 9 | 10 | ```ts 11 | type StandardSchemaV1 = object; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/standardSchemaValidator.ts:98](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L98) 15 | 16 | The Standard Schema interface. 17 | 18 | ## Type Parameters 19 | 20 | • **Input** = `unknown` 21 | 22 | • **Output** = `Input` 23 | 24 | ## Type declaration 25 | 26 | ### ~standard 27 | 28 | ```ts 29 | readonly ~standard: StandardSchemaV1Props; 30 | ``` 31 | 32 | The Standard Schema properties. 33 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/tstandardschemavalidatorissue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: TStandardSchemaValidatorIssue 3 | title: TStandardSchemaValidatorIssue 4 | --- 5 | 6 | 7 | 8 | # Type Alias: TStandardSchemaValidatorIssue\ 9 | 10 | ```ts 11 | type TStandardSchemaValidatorIssue = TSource extends "form" ? object : TSource extends "field" ? StandardSchemaV1Issue[] : never; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/standardSchemaValidator.ts:11](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L11) 15 | 16 | ## Type Parameters 17 | 18 | • **TSource** *extends* [`ValidationSource`](../validationsource.md) = [`ValidationSource`](../validationsource.md) 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/tstandardschemavalidatorvalue.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: TStandardSchemaValidatorValue 3 | title: TStandardSchemaValidatorValue 4 | --- 5 | 6 | 7 | 8 | # Type Alias: TStandardSchemaValidatorValue\ 9 | 10 | ```ts 11 | type TStandardSchemaValidatorValue = object; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/standardSchemaValidator.ts:3](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L3) 15 | 16 | ## Type Parameters 17 | 18 | • **TData** 19 | 20 | • **TSource** *extends* [`ValidationSource`](../validationsource.md) = [`ValidationSource`](../validationsource.md) 21 | 22 | ## Type declaration 23 | 24 | ### validationSource 25 | 26 | ```ts 27 | validationSource: TSource; 28 | ``` 29 | 30 | ### value 31 | 32 | ```ts 33 | value: TData; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/tupleaccessor.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: TupleAccessor 3 | title: TupleAccessor 4 | --- 5 | 6 | 7 | 8 | # Type Alias: TupleAccessor\ 9 | 10 | ```ts 11 | type TupleAccessor = `${TParent["key"] extends never ? "" : TParent["key"]}[${TKey}]`; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:51](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L51) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 19 | 20 | • **TKey** *extends* `string` 21 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/unknownaccessor.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: UnknownAccessor 3 | title: UnknownAccessor 4 | --- 5 | 6 | 7 | 8 | # Type Alias: UnknownAccessor\ 9 | 10 | ```ts 11 | type UnknownAccessor = TParent["key"] extends never ? string : `${TParent["key"]}.${string}`; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/util-types.ts:119](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L119) 15 | 16 | ## Type Parameters 17 | 18 | • **TParent** *extends* [`AnyDeepKeyAndValue`](../../interfaces/anydeepkeyandvalue.md) 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/unwrapfieldasyncvalidateorfn.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: UnwrapFieldAsyncValidateOrFn 3 | title: UnwrapFieldAsyncValidateOrFn 4 | --- 5 | 6 | 7 | 8 | # Type Alias: UnwrapFieldAsyncValidateOrFn\ 9 | 10 | ```ts 11 | type UnwrapFieldAsyncValidateOrFn = 12 | | [TFormValidateOrFn] extends [StandardSchemaV1] ? TName extends keyof TStandardOut ? StandardSchemaV1Issue[] : undefined : undefined 13 | | UnwrapFormAsyncValidateOrFnForInner extends infer TFormValidateVal ? TFormValidateVal extends object ? [DeepValue] extends [never] ? undefined : StandardSchemaV1Issue[] : TFormValidateVal extends object ? TName extends keyof TFormValidateVal["fields"] ? TFormValidateVal["fields"][TName] : undefined : undefined : never 14 | | [TValidateOrFn] extends [FieldValidateAsyncFn] ? Awaited> : [TValidateOrFn] extends [StandardSchemaV1] ? StandardSchemaV1Issue[] : undefined; 15 | ``` 16 | 17 | Defined in: [packages/form-core/src/FieldApi.ts:210](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L210) 18 | 19 | ## Type Parameters 20 | 21 | • **TName** *extends* `string` 22 | 23 | • **TValidateOrFn** *extends* `undefined` \| `FieldAsyncValidateOrFn`\<`any`, `any`, `any`\> 24 | 25 | • **TFormValidateOrFn** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`any`\> 26 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/unwrapfieldvalidateorfn.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: UnwrapFieldValidateOrFn 3 | title: UnwrapFieldValidateOrFn 4 | --- 5 | 6 | 7 | 8 | # Type Alias: UnwrapFieldValidateOrFn\ 9 | 10 | ```ts 11 | type UnwrapFieldValidateOrFn = 12 | | [TFormValidateOrFn] extends [StandardSchemaV1] ? TName extends keyof TStandardOut ? StandardSchemaV1Issue[] : undefined : undefined 13 | | UnwrapFormValidateOrFnForInner extends infer TFormValidateVal ? TFormValidateVal extends object ? [DeepValue] extends [never] ? undefined : StandardSchemaV1Issue[] : TFormValidateVal extends object ? TName extends keyof TFormValidateVal["fields"] ? TFormValidateVal["fields"][TName] : undefined : undefined : never 14 | | [TValidateOrFn] extends [FieldValidateFn] ? ReturnType : [TValidateOrFn] extends [StandardSchemaV1] ? StandardSchemaV1Issue[] : undefined; 15 | ``` 16 | 17 | Defined in: [packages/form-core/src/FieldApi.ts:128](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L128) 18 | 19 | ## Type Parameters 20 | 21 | • **TName** *extends* `string` 22 | 23 | • **TValidateOrFn** *extends* `undefined` \| `FieldValidateOrFn`\<`any`, `any`, `any`\> 24 | 25 | • **TFormValidateOrFn** *extends* `undefined` \| `FormValidateOrFn`\<`any`\> 26 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/unwrapformasyncvalidateorfn.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: UnwrapFormAsyncValidateOrFn 3 | title: UnwrapFormAsyncValidateOrFn 4 | --- 5 | 6 | 7 | 8 | # Type Alias: UnwrapFormAsyncValidateOrFn\ 9 | 10 | ```ts 11 | type UnwrapFormAsyncValidateOrFn = [TValidateOrFn] extends [FormValidateAsyncFn] ? Awaited> : [TValidateOrFn] extends [StandardSchemaV1] ? Record : undefined; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:148](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L148) 15 | 16 | ## Type Parameters 17 | 18 | • **TValidateOrFn** *extends* `undefined` \| `FormAsyncValidateOrFn`\<`any`\> 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/unwrapformvalidateorfn.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: UnwrapFormValidateOrFn 3 | title: UnwrapFormValidateOrFn 4 | --- 5 | 6 | 7 | 8 | # Type Alias: UnwrapFormValidateOrFn\ 9 | 10 | ```ts 11 | type UnwrapFormValidateOrFn = [TValidateOrFn] extends [FormValidateFn] ? ReturnType : [TValidateOrFn] extends [StandardSchemaV1] ? Record : undefined; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:96](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L96) 15 | 16 | ## Type Parameters 17 | 18 | • **TValidateOrFn** *extends* `undefined` \| `FormValidateOrFn`\<`any`\> 19 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/updater.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Updater 3 | title: Updater 4 | --- 5 | 6 | 7 | 8 | # Type Alias: Updater\ 9 | 10 | ```ts 11 | type Updater = TOutput | UpdaterFn; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/utils.ts:12](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L12) 15 | 16 | ## Type Parameters 17 | 18 | • **TInput** 19 | 20 | • **TOutput** = `TInput` 21 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/updaterfn.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: UpdaterFn 3 | title: UpdaterFn 4 | --- 5 | 6 | 7 | 8 | # Type Alias: UpdaterFn()\ 9 | 10 | ```ts 11 | type UpdaterFn = (input) => TOutput; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/utils.ts:10](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L10) 15 | 16 | ## Type Parameters 17 | 18 | • **TInput** 19 | 20 | • **TOutput** = `TInput` 21 | 22 | ## Parameters 23 | 24 | ### input 25 | 26 | `TInput` 27 | 28 | ## Returns 29 | 30 | `TOutput` 31 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/validationerror.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ValidationError 3 | title: ValidationError 4 | --- 5 | 6 | 7 | 8 | # Type Alias: ValidationError 9 | 10 | ```ts 11 | type ValidationError = unknown; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/types.ts:3](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L3) 15 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/validationmeta.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ValidationMeta 3 | title: ValidationMeta 4 | --- 5 | 6 | 7 | 8 | # Type Alias: ValidationMeta 9 | 10 | ```ts 11 | type ValidationMeta = object; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/FormApi.ts:454](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L454) 15 | 16 | An object representing the validation metadata for a field. Not intended for public usage. 17 | 18 | ## Type declaration 19 | 20 | ### lastAbortController 21 | 22 | ```ts 23 | lastAbortController: AbortController; 24 | ``` 25 | 26 | An abort controller stored in memory to cancel previous async validation attempts. 27 | -------------------------------------------------------------------------------- /docs/reference/type-aliases/validationsource.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ValidationSource 3 | title: ValidationSource 4 | --- 5 | 6 | 7 | 8 | # Type Alias: ValidationSource 9 | 10 | ```ts 11 | type ValidationSource = "form" | "field"; 12 | ``` 13 | 14 | Defined in: [packages/form-core/src/types.ts:5](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L5) 15 | -------------------------------------------------------------------------------- /docs/typescript.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: typescript 3 | title: TypeScript 4 | --- 5 | 6 | TanStack Form is written 100% in **TypeScript** with the highest quality generics, constraints and interfaces to make sure the library and your projects are as type-safe as possible! 7 | 8 | Things to keep in mind: 9 | 10 | - `strict: true` is required in your `tsconfig.json` to get the most out of TanStack Form's types 11 | - Types currently require using TypeScript v5.4 or greater 12 | - Changes to types in this repository are considered **non-breaking** and are usually released as **patch** semver changes (otherwise every type enhancement would be a major version!). 13 | - It is **highly recommended that you lock your react-form package version to a specific patch release and upgrade with the expectation that types may be fixed or upgraded between any release** 14 | - The non-type-related public API of TanStack Form still follows semver very strictly. 15 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | // @ts-ignore Needed due to moduleResolution Node vs Bundler 4 | import { tanstackConfig } from '@tanstack/config/eslint' 5 | 6 | export default [ 7 | ...tanstackConfig, 8 | { 9 | name: 'tanstack/temp', 10 | rules: { 11 | '@typescript-eslint/array-type': 'off', 12 | '@typescript-eslint/method-signature-style': 'off', 13 | '@typescript-eslint/naming-convention': 'off', 14 | '@typescript-eslint/no-unnecessary-type-assertion': 'off', 15 | '@typescript-eslint/no-unsafe-function-type': 'off', 16 | '@typescript-eslint/require-await': 'off', 17 | 'no-async-promise-executor': 'off', 18 | 'no-empty': 'off', 19 | }, 20 | }, 21 | ] 22 | -------------------------------------------------------------------------------- /examples/angular/array/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /examples/angular/array/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/array/README.md: -------------------------------------------------------------------------------- 1 | # Simple 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.1. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/array/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-angular-array", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng cache clean && ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test" 11 | }, 12 | "dependencies": { 13 | "@angular/animations": "^19.2.14", 14 | "@angular/common": "^19.2.14", 15 | "@angular/compiler": "^19.2.14", 16 | "@angular/core": "^19.2.14", 17 | "@angular/forms": "^19.2.14", 18 | "@angular/platform-browser": "^19.2.14", 19 | "@angular/platform-browser-dynamic": "^19.2.14", 20 | "@angular/router": "^19.2.14", 21 | "@tanstack/angular-form": "^1.12.0", 22 | "rxjs": "^7.8.2", 23 | "tslib": "^2.8.1", 24 | "zone.js": "^0.15.1" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^19.2.14", 28 | "@angular/cli": "^19.2.14", 29 | "@angular/compiler-cli": "^19.2.14", 30 | "typescript": "5.8.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/angular/array/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/form/488e3a7c9ab65981ae6ef588d0d3ef70c2a7cdca/examples/angular/array/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/array/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/array/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/array/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/array/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "strictInjectionParameters": true, 25 | "strictInputAccessModifiers": true, 26 | "strictTemplates": true 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/angular/array/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": ["jasmine"] 7 | }, 8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/angular/simple/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /examples/angular/simple/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/simple/README.md: -------------------------------------------------------------------------------- 1 | # Simple 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.1. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-angular-simple", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng cache clean && ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test" 11 | }, 12 | "dependencies": { 13 | "@angular/animations": "^19.2.14", 14 | "@angular/common": "^19.2.14", 15 | "@angular/compiler": "^19.2.14", 16 | "@angular/core": "^19.2.14", 17 | "@angular/forms": "^19.2.14", 18 | "@angular/platform-browser": "^19.2.14", 19 | "@angular/platform-browser-dynamic": "^19.2.14", 20 | "@angular/router": "^19.2.14", 21 | "@tanstack/angular-form": "^1.12.0", 22 | "rxjs": "^7.8.2", 23 | "tslib": "^2.8.1", 24 | "zone.js": "^0.15.1" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^19.2.14", 28 | "@angular/cli": "^19.2.14", 29 | "@angular/compiler-cli": "^19.2.14", 30 | "typescript": "5.8.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/angular/simple/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/form/488e3a7c9ab65981ae6ef588d0d3ef70c2a7cdca/examples/angular/simple/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/simple/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/simple/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/simple/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/simple/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "strictInjectionParameters": true, 25 | "strictInputAccessModifiers": true, 26 | "strictTemplates": true 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/angular/simple/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": ["jasmine"] 7 | }, 8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/lit/simple/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = {} 5 | 6 | module.exports = config 7 | -------------------------------------------------------------------------------- /examples/lit/simple/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/lit/simple/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/lit/simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Lit + TS 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/lit/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-lit-simple", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/lit-form": "^1.12.0", 13 | "lit": "^3.3.0" 14 | }, 15 | "devDependencies": { 16 | "vite": "^6.3.5" 17 | }, 18 | "browserslist": { 19 | "production": [ 20 | ">0.2%", 21 | "not dead", 22 | "not op_mini all" 23 | ], 24 | "development": [ 25 | "last 1 chrome version", 26 | "last 1 firefox version", 27 | "last 1 safari version" 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/lit/simple/src/styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'lit' 2 | 3 | export const styles = css` 4 | form { 5 | max-width: 600px; 6 | margin: 10px auto; 7 | border: 1px solid #ccc; 8 | border-radius: 3px; 9 | box-shadow: 1 1 2px rgba(0, 0, 0, 0.3); 10 | padding: 10px; 11 | display: flex; 12 | flex-flow: column nowrap; 13 | } 14 | 15 | h1 { 16 | text-align: center; 17 | color: #333; 18 | } 19 | 20 | p { 21 | margin: 10px auto; 22 | line-height: 1.2em; 23 | max-width: 500px; 24 | } 25 | 26 | .container { 27 | margin: 10px; 28 | display: flex; 29 | flex-flow: row nowrap; 30 | justify-content: center; 31 | } 32 | 33 | label { 34 | width: 120px; 35 | text-align: right; 36 | margin-right: 15px; 37 | padding: 5px; 38 | } 39 | 40 | input { 41 | padding: 5px; 42 | flex: 1; 43 | border: 1px solid #ccc; 44 | border-radius: 3px; 45 | } 46 | 47 | select { 48 | flex: 1; 49 | height: 24px; 50 | border: 1px solid #ccc; 51 | border-radius: 3px; 52 | } 53 | 54 | span { 55 | color: #600; 56 | font-weight: bold; 57 | margin: 0 0 0 10px; 58 | line-height: 26px; 59 | } 60 | 61 | button { 62 | width: 80px; 63 | display: block; 64 | margin: 0 auto; 65 | } 66 | ` 67 | -------------------------------------------------------------------------------- /examples/lit/simple/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/lit/ui-libraries/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = {} 5 | 6 | module.exports = config 7 | -------------------------------------------------------------------------------- /examples/lit/ui-libraries/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/lit/ui-libraries/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/lit/ui-libraries/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Lit + TS 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/lit/ui-libraries/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-lit-ui-libraries", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@material/web": "^2.3.0", 13 | "@tanstack/lit-form": "^1.12.0", 14 | "lit": "^3.3.0" 15 | }, 16 | "devDependencies": { 17 | "vite": "^6.3.5" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/lit/ui-libraries/src/styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'lit' 2 | 3 | export const styles = css` 4 | form { 5 | max-width: 600px; 6 | margin: 10px auto; 7 | border: 1px solid #ccc; 8 | border-radius: 3px; 9 | box-shadow: 1 1 2px rgba(0, 0, 0, 0.3); 10 | padding: 10px; 11 | display: flex; 12 | flex-flow: column nowrap; 13 | } 14 | 15 | h1 { 16 | text-align: center; 17 | color: #333; 18 | } 19 | 20 | p { 21 | margin: 10px auto; 22 | line-height: 1.2em; 23 | max-width: 500px; 24 | } 25 | 26 | div { 27 | margin: 10px; 28 | display: flex; 29 | flex-flow: row nowrap; 30 | justify-content: center; 31 | } 32 | 33 | label { 34 | width: 120px; 35 | text-align: right; 36 | margin-right: 15px; 37 | padding: 5px; 38 | } 39 | 40 | input { 41 | padding: 5px; 42 | flex: 1; 43 | border: 1px solid #ccc; 44 | border-radius: 3px; 45 | } 46 | 47 | select { 48 | flex: 1; 49 | height: 24px; 50 | border: 1px solid #ccc; 51 | border-radius: 3px; 52 | } 53 | 54 | span { 55 | color: #600; 56 | font-weight: bold; 57 | margin: 0 0 0 10px; 58 | line-height: 26px; 59 | } 60 | 61 | button { 62 | width: 80px; 63 | display: block; 64 | margin: 0 auto; 65 | } 66 | ` 67 | -------------------------------------------------------------------------------- /examples/lit/ui-libraries/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/react/array/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = { 5 | extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], 6 | rules: { 7 | 'react/no-children-prop': 'off', 8 | }, 9 | } 10 | 11 | module.exports = config 12 | -------------------------------------------------------------------------------- /examples/react/array/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/array/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TanStack Form React Simple Example App 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/react/array/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-array", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "react": "^19.0.0", 14 | "react-dom": "^19.0.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^19.0.7", 18 | "@types/react-dom": "^19.0.3", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "vite": "^6.3.5" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/react/array/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "Bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/compiler/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const reactCompiler = require('eslint-plugin-react-compiler') 3 | 4 | /** @type {import('eslint').Linter.Config} */ 5 | const config = { 6 | plugins: { 7 | 'react-compiler': reactCompiler, 8 | }, 9 | extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], 10 | rules: { 11 | 'react/no-children-prop': 'off', 12 | 'react-compiler/react-compiler': 'error', 13 | }, 14 | } 15 | 16 | module.exports = config 17 | -------------------------------------------------------------------------------- /examples/react/compiler/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/compiler/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/compiler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TanStack Form React Simple Example App 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/react/compiler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-compiler", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "_test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "react": "^19.0.0", 14 | "react-dom": "^19.0.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^19.0.7", 18 | "@types/react-dom": "^19.0.3", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "babel-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411", 21 | "eslint-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411", 22 | "vite": "^6.3.5" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/react/compiler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "Bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/compiler/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | const ReactCompilerConfig = {} 5 | 6 | export default defineConfig(() => { 7 | return { 8 | plugins: [ 9 | react({ 10 | babel: { 11 | plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]], 12 | }, 13 | }), 14 | ], 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /examples/react/field-errors-from-form-validators/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = { 5 | extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], 6 | rules: { 7 | 'react/no-children-prop': 'off', 8 | }, 9 | } 10 | 11 | module.exports = config 12 | -------------------------------------------------------------------------------- /examples/react/field-errors-from-form-validators/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/field-errors-from-form-validators/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/field-errors-from-form-validators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | TanStack Form React Field Errors From Form Validators Example App 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/react/field-errors-from-form-validators/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/field-errors-from-form-validators", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "react": "^19.0.0", 14 | "react-dom": "^19.0.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^19.0.7", 18 | "@types/react-dom": "^19.0.3", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "vite": "^6.3.5" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/react/field-errors-from-form-validators/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react-jsx", 4 | "noEmit": true, 5 | "strict": true, 6 | "esModuleInterop": true, 7 | "lib": ["DOM", "DOM.Iterable", "ES2020"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/react/large-form/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = { 5 | extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], 6 | rules: { 7 | 'react/no-children-prop': 'off', 8 | }, 9 | } 10 | 11 | module.exports = config 12 | -------------------------------------------------------------------------------- /examples/react/large-form/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/large-form/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/large-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TanStack Form React Simple Example App 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/react/large-form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-large-form", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "react": "^19.0.0", 14 | "react-dom": "^19.0.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^19.0.7", 18 | "@types/react-dom": "^19.0.3", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "vite": "^6.3.5" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/react/large-form/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Suspense } from 'react' 2 | import { PeoplePage } from './features/people/page.tsx' 3 | 4 | export default function App() { 5 | return ( 6 | Loading...

}> 7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /examples/react/large-form/src/components/text-fields.tsx: -------------------------------------------------------------------------------- 1 | import { useStore } from '@tanstack/react-form' 2 | import { useFieldContext } from '../hooks/form-context.tsx' 3 | 4 | export default function TextField({ label }: { label: string }) { 5 | const field = useFieldContext() 6 | 7 | const errors = useStore(field.store, (state) => state.meta.errors) 8 | 9 | return ( 10 |
11 | 18 | {errors.map((error: string) => ( 19 |
20 | {error} 21 |
22 | ))} 23 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/large-form/src/features/people/address-fields.tsx: -------------------------------------------------------------------------------- 1 | import { withForm } from '../../hooks/form.tsx' 2 | import { peopleFormOpts } from './shared-form.tsx' 3 | 4 | export const AddressFields = withForm({ 5 | ...peopleFormOpts, 6 | render: ({ form }) => { 7 | return ( 8 |
9 |

Address

10 | } 13 | /> 14 | } 17 | /> 18 | } 21 | /> 22 | } 25 | /> 26 | } 29 | /> 30 |
31 | ) 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /examples/react/large-form/src/features/people/shared-form.tsx: -------------------------------------------------------------------------------- 1 | import { formOptions } from '@tanstack/react-form' 2 | 3 | export const peopleFormOpts = formOptions({ 4 | defaultValues: { 5 | fullName: '', 6 | email: '', 7 | phone: '', 8 | address: { 9 | line1: '', 10 | line2: '', 11 | city: '', 12 | state: '', 13 | zip: '', 14 | }, 15 | emergencyContact: { 16 | fullName: '', 17 | phone: '', 18 | }, 19 | }, 20 | }) 21 | -------------------------------------------------------------------------------- /examples/react/large-form/src/hooks/form-context.tsx: -------------------------------------------------------------------------------- 1 | import { createFormHookContexts } from '@tanstack/react-form' 2 | 3 | export const { fieldContext, useFieldContext, formContext, useFormContext } = 4 | createFormHookContexts() 5 | -------------------------------------------------------------------------------- /examples/react/large-form/src/hooks/form.tsx: -------------------------------------------------------------------------------- 1 | import { createFormHook } from '@tanstack/react-form' 2 | import { lazy } from 'react' 3 | import { fieldContext, formContext, useFormContext } from './form-context.tsx' 4 | 5 | const TextField = lazy(() => import('../components/text-fields.tsx')) 6 | 7 | function SubscribeButton({ label }: { label: string }) { 8 | const form = useFormContext() 9 | return ( 10 | state.isSubmitting}> 11 | {(isSubmitting) => } 12 | 13 | ) 14 | } 15 | 16 | export const { useAppForm, withForm } = createFormHook({ 17 | fieldComponents: { 18 | TextField, 19 | }, 20 | formComponents: { 21 | SubscribeButton, 22 | }, 23 | fieldContext, 24 | formContext, 25 | }) 26 | -------------------------------------------------------------------------------- /examples/react/large-form/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.tsx' 4 | 5 | const rootElement = document.getElementById('root')! 6 | 7 | createRoot(rootElement).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /examples/react/large-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "Bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | export default nextConfig 7 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-next-server-actions", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "_test:types": "tsc" 9 | }, 10 | "dependencies": { 11 | "@tanstack/react-form": "^1.12.0", 12 | "@tanstack/react-store": "^0.7.1", 13 | "next": "15.3.3", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "^22.10.6", 19 | "@types/react": "^19.0.7", 20 | "@types/react-dom": "^19.0.3", 21 | "typescript": "5.8.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/src/app/action.ts: -------------------------------------------------------------------------------- 1 | 'use server' 2 | 3 | import { 4 | ServerValidateError, 5 | createServerValidate, 6 | } from '@tanstack/react-form/nextjs' 7 | import { formOpts } from './shared-code' 8 | 9 | const serverValidate = createServerValidate({ 10 | ...formOpts, 11 | onServerValidate: ({ value }) => { 12 | if (value.age < 12) { 13 | return 'Server validation: You must be at least 12 to sign up' 14 | } 15 | }, 16 | }) 17 | 18 | export default async function someAction(prev: unknown, formData: FormData) { 19 | try { 20 | const validatedData = await serverValidate(formData) 21 | console.log('validatedData', validatedData) 22 | // Persist the form data to the database 23 | // await sql` 24 | // INSERT INTO users (name, email, password) 25 | // VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password}) 26 | // ` 27 | } catch (e) { 28 | if (e instanceof ServerValidateError) { 29 | return e.formState 30 | } 31 | 32 | // Some other error occurred while validating your form 33 | throw e 34 | } 35 | 36 | // Your form has successfully validated! 37 | } 38 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | 3 | export const metadata: Metadata = { 4 | title: 'Create Next App', 5 | description: 'Generated by create next app', 6 | } 7 | 8 | export default function RootLayout({ 9 | children, 10 | }: { 11 | children: React.ReactNode 12 | }) { 13 | return ( 14 | 15 | {children} 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { ClientComp } from './client-component' 2 | 3 | export default function Home() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/src/app/shared-code.ts: -------------------------------------------------------------------------------- 1 | import { formOptions } from '@tanstack/react-form/nextjs' 2 | 3 | export const formOpts = formOptions({ 4 | defaultValues: { 5 | firstName: '', 6 | age: 0, 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/react/next-server-actions/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "ESNext", 11 | "moduleResolution": "Bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ] 21 | }, 22 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 23 | "exclude": ["node_modules"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/react/query-integration/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = { 5 | extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], 6 | rules: { 7 | 'react/no-children-prop': 'off', 8 | }, 9 | } 10 | 11 | module.exports = config 12 | -------------------------------------------------------------------------------- /examples/react/query-integration/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/query-integration/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/query-integration/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TanStack Form React Simple Example App 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/react/query-integration/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-query-integration", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "@tanstack/react-query": "^5.79.0", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^19.0.7", 19 | "@types/react-dom": "^19.0.3", 20 | "@vitejs/plugin-react": "^4.5.0", 21 | "vite": "^6.3.5" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/react/query-integration/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "Bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/remix/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /.cache 4 | /build 5 | .env 6 | -------------------------------------------------------------------------------- /examples/react/remix/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Remix! 2 | 3 | - 📖 [Remix docs](https://remix.run/docs) 4 | 5 | ## Development 6 | 7 | Run the dev server: 8 | 9 | ```shellscript 10 | npm run dev 11 | ``` 12 | 13 | ## Deployment 14 | 15 | First, build your app for production: 16 | 17 | ```sh 18 | npm run build 19 | ``` 20 | 21 | Then run the app in production mode: 22 | 23 | ```sh 24 | npm start 25 | ``` 26 | 27 | Now you'll need to pick a host to deploy it to. 28 | 29 | ### DIY 30 | 31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready. 32 | 33 | Make sure to deploy the output of `npm run build` 34 | 35 | - `build/server` 36 | - `build/client` 37 | 38 | ## Styling 39 | 40 | This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information. 41 | -------------------------------------------------------------------------------- /examples/react/remix/app/root.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Links, 3 | Meta, 4 | Outlet, 5 | Scripts, 6 | ScrollRestoration, 7 | } from '@remix-run/react' 8 | 9 | export function Layout({ children }: { children: React.ReactNode }) { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | {children} 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | export default function App() { 28 | return 29 | } 30 | -------------------------------------------------------------------------------- /examples/react/remix/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-remix", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "remix vite:build", 7 | "dev": "remix vite:dev", 8 | "_test:types": "tsc" 9 | }, 10 | "dependencies": { 11 | "@remix-run/node": "^2.16.8", 12 | "@remix-run/react": "^2.16.8", 13 | "@remix-run/serve": "^2.16.8", 14 | "@tanstack/react-form": "^1.12.0", 15 | "@tanstack/react-store": "^0.7.1", 16 | "isbot": "^5.1.28", 17 | "react": "^19.0.0", 18 | "react-dom": "^19.0.0" 19 | }, 20 | "devDependencies": { 21 | "@remix-run/dev": "^2.16.8", 22 | "@types/react": "^19.0.7", 23 | "@types/react-dom": "^19.0.3", 24 | "typescript": "5.8.2", 25 | "vite": "^6.3.5", 26 | "vite-tsconfig-paths": "^5.1.4" 27 | }, 28 | "engines": { 29 | "node": ">=20.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/react/remix/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/form/488e3a7c9ab65981ae6ef588d0d3ef70c2a7cdca/examples/react/remix/public/favicon.ico -------------------------------------------------------------------------------- /examples/react/remix/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "**/*.ts", 4 | "**/*.tsx", 5 | "**/.server/**/*.ts", 6 | "**/.server/**/*.tsx", 7 | "**/.client/**/*.ts", 8 | "**/.client/**/*.tsx" 9 | ], 10 | "compilerOptions": { 11 | "lib": ["DOM", "DOM.Iterable", "ES2022"], 12 | "types": ["@remix-run/node", "vite/client"], 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "jsx": "react-jsx", 16 | "module": "ESNext", 17 | "moduleResolution": "Bundler", 18 | "resolveJsonModule": true, 19 | "target": "ES2022", 20 | "strict": true, 21 | "allowJs": true, 22 | "skipLibCheck": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "baseUrl": ".", 25 | "paths": { 26 | "~/*": ["./app/*"] 27 | }, 28 | 29 | // Vite takes care of building everything, not tsc. 30 | "noEmit": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/react/remix/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { vitePlugin as remix } from '@remix-run/dev' 2 | import { defineConfig } from 'vite' 3 | import tsconfigPaths from 'vite-tsconfig-paths' 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | remix({ 8 | future: { 9 | v3_fetcherPersist: true, 10 | v3_relativeSplatPath: true, 11 | v3_throwAbortReason: true, 12 | }, 13 | }), 14 | tsconfigPaths(), 15 | ], 16 | }) 17 | -------------------------------------------------------------------------------- /examples/react/simple/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = { 5 | extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], 6 | rules: { 7 | 'react/no-children-prop': 'off', 8 | }, 9 | } 10 | 11 | module.exports = config 12 | -------------------------------------------------------------------------------- /examples/react/simple/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/simple/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TanStack Form React Simple Example App 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/react/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-simple", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "react": "^19.0.0", 14 | "react-dom": "^19.0.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^19.0.7", 18 | "@types/react-dom": "^19.0.3", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "vite": "^6.3.5" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/react/simple/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "Bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/standard-schema/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = { 5 | extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], 6 | rules: { 7 | 'react/no-children-prop': 'off', 8 | }, 9 | } 10 | 11 | module.exports = config 12 | -------------------------------------------------------------------------------- /examples/react/standard-schema/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/standard-schema/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/standard-schema/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TanStack Form React Standard Schema Example App 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/react/standard-schema/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-standard-schema", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "arktype": "^2.1.20", 14 | "effect": "^3.16.3", 15 | "react": "^19.0.0", 16 | "react-dom": "^19.0.0", 17 | "valibot": "^1.1.0", 18 | "zod": "^3.25.48" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^19.0.7", 22 | "@types/react-dom": "^19.0.3", 23 | "@vitejs/plugin-react": "^4.5.0", 24 | "vite": "^6.3.5" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/react/standard-schema/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "Bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": false, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | yarn.lock 4 | 5 | .DS_Store 6 | .cache 7 | .env 8 | .vercel 9 | .output 10 | .vinxi 11 | 12 | /build/ 13 | /api/ 14 | /server/build 15 | /public/build 16 | .vinxi 17 | # Sentry Config File 18 | .env.sentry-build-plugin 19 | /test-results/ 20 | /playwright-report/ 21 | /blob-report/ 22 | /playwright/.cache/ 23 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/app.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@tanstack/react-start/config' 2 | import tsConfigPaths from 'vite-tsconfig-paths' 3 | 4 | export default defineConfig({ 5 | vite: { 6 | plugins: [ 7 | tsConfigPaths({ 8 | projects: ['./tsconfig.json'], 9 | }), 10 | ], 11 | }, 12 | react: { 13 | exclude: [/packages/], 14 | }, 15 | } as Partial[0]> as never) 16 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/app/client.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | import { hydrateRoot } from 'react-dom/client' 3 | import { StartClient } from '@tanstack/react-start' 4 | import { createRouter } from './router' 5 | 6 | const router = createRouter() 7 | 8 | hydrateRoot(document, ) 9 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/app/router.tsx: -------------------------------------------------------------------------------- 1 | import { createRouter as createTanStackRouter } from '@tanstack/react-router' 2 | import { routeTree } from './routeTree.gen' 3 | 4 | export function createRouter() { 5 | const router = createTanStackRouter({ 6 | routeTree, 7 | defaultPreload: 'intent', 8 | scrollRestoration: true, 9 | }) 10 | 11 | return router 12 | } 13 | 14 | declare module '@tanstack/react-router' { 15 | interface Register { 16 | router: ReturnType 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/app/routes/__root.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | HeadContent, 3 | Outlet, 4 | Scripts, 5 | createRootRoute, 6 | } from '@tanstack/react-router' 7 | 8 | import type { ReactNode } from 'react' 9 | 10 | export const Route = createRootRoute({ 11 | head: () => ({ 12 | meta: [ 13 | { 14 | charSet: 'utf-8', 15 | }, 16 | { 17 | name: 'viewport', 18 | content: 'width=device-width, initial-scale=1', 19 | }, 20 | { 21 | title: 'TanStack Form + Start', 22 | }, 23 | ], 24 | }), 25 | component: RootComponent, 26 | }) 27 | 28 | function RootComponent() { 29 | return ( 30 | 31 | 32 | 33 | ) 34 | } 35 | 36 | function RootDocument({ children }: Readonly<{ children: ReactNode }>) { 37 | return ( 38 | 39 | 40 | 41 | 42 | 43 | {children} 44 | 45 | 46 | 47 | ) 48 | } 49 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/app/ssr.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | import { 3 | createStartHandler, 4 | defaultStreamHandler, 5 | } from '@tanstack/react-start/server' 6 | import { getRouterManifest } from '@tanstack/react-start/router-manifest' 7 | 8 | import { createRouter } from './router' 9 | 10 | export default createStartHandler({ 11 | createRouter, 12 | getRouterManifest, 13 | })(defaultStreamHandler) 14 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/app/utils/form-isomorphic.ts: -------------------------------------------------------------------------------- 1 | import { formOptions } from '@tanstack/react-form' 2 | 3 | export const formOpts = formOptions({ 4 | defaultValues: { 5 | firstName: '', 6 | age: 0, 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-tanstack-start", 3 | "private": true, 4 | "sideEffects": false, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vinxi dev", 8 | "_build": "vinxi build", 9 | "start": "vinxi start" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-form": "^1.12.0", 13 | "@tanstack/react-router": "^1.120.13", 14 | "@tanstack/react-start": "^1.120.13", 15 | "@tanstack/react-store": "^0.7.1", 16 | "react": "^19.0.0", 17 | "react-dom": "^19.0.0", 18 | "vinxi": "^0.5.6" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "^22.10.6", 22 | "@types/react": "^19.0.7", 23 | "@types/react-dom": "^19.0.3", 24 | "@vitejs/plugin-react": "^4.5.0", 25 | "typescript": "5.8.2", 26 | "vite": "^6.3.5", 27 | "vite-tsconfig-paths": "^5.1.4" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/react/tanstack-start/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["**/*.ts", "**/*.tsx"], 3 | "compilerOptions": { 4 | "strict": true, 5 | "esModuleInterop": true, 6 | "jsx": "react-jsx", 7 | "module": "ESNext", 8 | "moduleResolution": "Bundler", 9 | "lib": ["DOM", "DOM.Iterable", "ES2022"], 10 | "isolatedModules": true, 11 | "resolveJsonModule": true, 12 | "skipLibCheck": true, 13 | "target": "ES2022", 14 | "allowJs": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "~/*": ["./app/*"] 19 | }, 20 | "noEmit": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('eslint').Linter.Config} */ 4 | const config = { 5 | extends: ['plugin:react-hooks/recommended'], 6 | plugins: ['react-refresh'], 7 | rules: { 8 | 'react-refresh/only-export-components': 'warn', 9 | }, 10 | } 11 | 12 | module.exports = config 13 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | pnpm-lock.yaml 15 | yarn.lock 16 | package-lock.json 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TanStack Form React With UI MUI and Mantine 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-react-ui-libraries", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite --port=3001", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test:types": "tsc --noEmit" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "11.14.0", 13 | "@emotion/styled": "11.14.0", 14 | "@mantine/core": "7.17.8", 15 | "@mantine/hooks": "7.17.8", 16 | "@mui/material": "6.4.12", 17 | "@tanstack/react-form": "^1.12.0", 18 | "@yme/lay-postcss": "0.1.0", 19 | "postcss": "8.5.4", 20 | "postcss-preset-mantine": "1.17.0", 21 | "postcss-simple-vars": "7.0.1", 22 | "react": "^19.0.0", 23 | "react-dom": "^19.0.0" 24 | }, 25 | "devDependencies": { 26 | "@types/react": "^19.0.7", 27 | "@types/react-dom": "^19.0.3", 28 | "@vitejs/plugin-react": "^4.5.0", 29 | "@vitejs/plugin-react-swc": "^3.10.0", 30 | "typescript": "5.8.2", 31 | "vite": "^6.3.5" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-preset-mantine': {}, 4 | 'postcss-simple-vars': { 5 | variables: { 6 | 'mantine-breakpoint-xs': '36em', 7 | 'mantine-breakpoint-sm': '48em', 8 | 'mantine-breakpoint-md': '62em', 9 | 'mantine-breakpoint-lg': '75em', 10 | 'mantine-breakpoint-xl': '88em', 11 | }, 12 | }, 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import { createTheme } from '@mui/material/styles' 3 | import { red } from '@mui/material/colors' 4 | import { ThemeProvider } from '@emotion/react' 5 | import { CssBaseline } from '@mui/material' 6 | import MainComponent from './MainComponent' 7 | import React from 'react' 8 | 9 | const theme = createTheme({ 10 | palette: { 11 | primary: { 12 | main: '#556cd6', 13 | }, 14 | secondary: { 15 | main: '#19857b', 16 | }, 17 | error: { 18 | main: red.A400, 19 | }, 20 | }, 21 | }) 22 | 23 | export default function App() { 24 | return ( 25 | 26 | 27 | 28 | 29 | ) 30 | } 31 | 32 | const rootElement = document.getElementById('root')! 33 | 34 | createRoot(rootElement).render( 35 | 36 | 37 | , 38 | ) 39 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "Bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "include": ["src", "vite.config.ts"] 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/ui-libraries/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/solid/array/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/solid/array/README.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | ```bash 4 | $ npm install # or pnpm install or yarn install 5 | ``` 6 | 7 | ### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs) 8 | 9 | ## Available Scripts 10 | 11 | In the project directory, you can run: 12 | 13 | ### `npm run dev` 14 | 15 | Runs the app in the development mode.
16 | Open [http://localhost:5173](http://localhost:5173) to view it in the browser. 17 | 18 | ### `npm run build` 19 | 20 | Builds the app for production to the `dist` folder.
21 | It correctly bundles Solid in production mode and optimizes the build for the best performance. 22 | 23 | The build is minified and the filenames include the hashes.
24 | Your app is ready to be deployed! 25 | 26 | ## Deployment 27 | 28 | Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html) 29 | -------------------------------------------------------------------------------- /examples/solid/array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TanStack Form Solid Array Example App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/solid/array/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-solid-array", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "test:types": "tsc", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tanstack/solid-form": "^1.12.0", 13 | "solid-js": "^1.9.7" 14 | }, 15 | "devDependencies": { 16 | "typescript": "5.8.2", 17 | "vite": "^6.3.5", 18 | "vite-plugin-solid": "^2.11.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/solid/array/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/solid/array/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | "jsxImportSource": "solid-js", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src", "vite.config.ts"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/solid/array/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import solid from 'vite-plugin-solid' 3 | 4 | export default defineConfig({ 5 | plugins: [solid()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/solid/simple/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/solid/simple/README.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | ```bash 4 | $ npm install # or pnpm install or yarn install 5 | ``` 6 | 7 | ### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs) 8 | 9 | ## Available Scripts 10 | 11 | In the project directory, you can run: 12 | 13 | ### `npm run dev` 14 | 15 | Runs the app in the development mode.
16 | Open [http://localhost:5173](http://localhost:5173) to view it in the browser. 17 | 18 | ### `npm run build` 19 | 20 | Builds the app for production to the `dist` folder.
21 | It correctly bundles Solid in production mode and optimizes the build for the best performance. 22 | 23 | The build is minified and the filenames include the hashes.
24 | Your app is ready to be deployed! 25 | 26 | ## Deployment 27 | 28 | Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html) 29 | -------------------------------------------------------------------------------- /examples/solid/simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TanStack Form Solid Simple Example App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/solid/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-solid-simple", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "test:types": "tsc", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tanstack/solid-form": "^1.12.0", 13 | "solid-js": "^1.9.7" 14 | }, 15 | "devDependencies": { 16 | "typescript": "5.8.2", 17 | "vite": "^6.3.5", 18 | "vite-plugin-solid": "^2.11.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/solid/simple/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/solid/simple/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | "jsxImportSource": "solid-js", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src", "vite.config.ts"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/solid/simple/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import solid from 'vite-plugin-solid' 3 | 4 | export default defineConfig({ 5 | plugins: [solid()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/svelte/array/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/array/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Svelte + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/svelte/array/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-svelte-array", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tanstack/svelte-form": "^1.12.0" 13 | }, 14 | "devDependencies": { 15 | "@sveltejs/vite-plugin-svelte": "^5.0.3", 16 | "@tsconfig/svelte": "^5.0.4", 17 | "svelte": "^5.33.13", 18 | "typescript": "5.8.2", 19 | "vite": "^6.3.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/svelte/array/src/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
{ 15 | e.preventDefault() 16 | e.stopPropagation() 17 | form.handleSubmit() 18 | }} 19 | > 20 |

TanStack Form - Svelte Demo

21 | 22 | 23 | {#snippet children(field)} 24 |
25 | {#each field.state.value as person, i} 26 | 27 | {#snippet children(subField)} 28 |
29 | 39 |
40 | {/snippet} 41 | 42 | {/each} 43 | 44 | 50 |
51 | {/snippet} 52 | 53 | 54 | 55 |
56 | -------------------------------------------------------------------------------- /examples/svelte/array/src/main.ts: -------------------------------------------------------------------------------- 1 | import { mount } from 'svelte' 2 | import App from './App.svelte' 3 | 4 | const app = mount(App, { 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/array/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/array/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/array/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true, 17 | "moduleDetection": "force" 18 | }, 19 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/array/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/svelte/simple/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/simple/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Svelte + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/svelte/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-svelte-simple", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tanstack/svelte-form": "^1.12.0" 13 | }, 14 | "devDependencies": { 15 | "@sveltejs/vite-plugin-svelte": "^5.0.3", 16 | "@tsconfig/svelte": "^5.0.4", 17 | "svelte": "^5.33.13", 18 | "typescript": "5.8.2", 19 | "vite": "^6.3.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/svelte/simple/src/FieldInfo.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | {#if field.state.meta.isTouched} 8 | {#each field.state.meta.errors as error} 9 | {error} 10 | {/each} 11 | {field.state.meta.isValidating ? 'Validating...' : ''} 12 | {/if} 13 | -------------------------------------------------------------------------------- /examples/svelte/simple/src/main.ts: -------------------------------------------------------------------------------- 1 | import { mount } from 'svelte' 2 | import App from './App.svelte' 3 | 4 | const app = mount(App, { 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/simple/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/simple/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/simple/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true, 17 | "moduleDetection": "force" 18 | }, 19 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/simple/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/array/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | package-lock.json 8 | yarn.lock 9 | pnpm-lock.yaml 10 | -------------------------------------------------------------------------------- /examples/vue/array/README.md: -------------------------------------------------------------------------------- 1 | # Basic example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` or `pnpm i` 6 | - `npm run dev` or `yarn dev` or `pnpm dev` 7 | -------------------------------------------------------------------------------- /examples/vue/array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TanStack Form Vue Array Example App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/vue/array/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-vue-array", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "build:dev": "vite build -m development", 9 | "test:types": "vue-tsc", 10 | "serve": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tanstack/vue-form": "^1.12.0", 14 | "vue": "^3.5.13" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^5.2.4", 18 | "typescript": "5.8.2", 19 | "vite": "^6.3.5", 20 | "vue-tsc": "^2.2.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/vue/array/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/array/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue' 3 | const component: DefineComponent<{}, {}, any> 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /examples/vue/array/src/types.d.ts: -------------------------------------------------------------------------------- 1 | export interface Post { 2 | userId: number 3 | id: number 4 | title: string 5 | body: string 6 | } 7 | -------------------------------------------------------------------------------- /examples/vue/array/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/vue/array/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | optimizeDeps: { 8 | exclude: ['@tanstack/vue-form'], 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /examples/vue/simple/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | package-lock.json 8 | yarn.lock 9 | pnpm-lock.yaml 10 | -------------------------------------------------------------------------------- /examples/vue/simple/README.md: -------------------------------------------------------------------------------- 1 | # Basic example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` or `pnpm i` 6 | - `npm run dev` or `yarn dev` or `pnpm dev` 7 | -------------------------------------------------------------------------------- /examples/vue/simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TanStack Form Vue Simple Example App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/vue/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/form-example-vue-simple", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "build:dev": "vite build -m development", 9 | "test:types": "vue-tsc", 10 | "serve": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tanstack/vue-form": "^1.12.0", 14 | "vue": "^3.5.13" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^5.2.4", 18 | "typescript": "5.8.2", 19 | "vite": "^6.3.5", 20 | "vue-tsc": "^2.2.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/vue/simple/src/FieldInfo.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /examples/vue/simple/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/simple/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue' 3 | const component: DefineComponent<{}, {}, any> 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /examples/vue/simple/src/types.d.ts: -------------------------------------------------------------------------------- 1 | export interface Post { 2 | userId: number 3 | id: number 4 | title: string 5 | body: string 6 | } 7 | -------------------------------------------------------------------------------- /examples/vue/simple/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/vue/simple/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | optimizeDeps: { 8 | exclude: ['@tanstack/vue-form'], 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /knip.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/knip@5/schema.json", 3 | "ignoreDependencies": ["@tanstack/react-start", "vinxi"], 4 | "ignoreWorkspaces": ["examples/**"] 5 | } 6 | -------------------------------------------------------------------------------- /media/repo-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/form/488e3a7c9ab65981ae6ef588d0d3ef70c2a7cdca/media/repo-header.png -------------------------------------------------------------------------------- /packages/angular-form/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/angular-form/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/ng-packagr/ng-package.schema.json", 3 | "lib": { 4 | "entryFile": "src/index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "@tanstack/form-core", 8 | "@tanstack/angular-store" 9 | ], 10 | "dest": "dist", 11 | "deleteDestPath": false 12 | } 13 | -------------------------------------------------------------------------------- /packages/angular-form/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | 3 | export { injectForm } from './inject-form' 4 | export { TanStackField } from './tanstack-field.directive' 5 | export { injectStore } from './inject-store' 6 | -------------------------------------------------------------------------------- /packages/angular-form/src/inject-form.ts: -------------------------------------------------------------------------------- 1 | import { FormApi } from '@tanstack/form-core' 2 | import { injectStore } from '@tanstack/angular-store' 3 | import type { 4 | FormAsyncValidateOrFn, 5 | FormOptions, 6 | FormValidateOrFn, 7 | } from '@tanstack/form-core' 8 | 9 | export function injectForm< 10 | TFormData, 11 | TOnMount extends undefined | FormValidateOrFn, 12 | TOnChange extends undefined | FormValidateOrFn, 13 | TOnChangeAsync extends undefined | FormAsyncValidateOrFn, 14 | TOnBlur extends undefined | FormValidateOrFn, 15 | TOnBlurAsync extends undefined | FormAsyncValidateOrFn, 16 | TOnSubmit extends undefined | FormValidateOrFn, 17 | TOnSubmitAsync extends undefined | FormAsyncValidateOrFn, 18 | TOnServer extends undefined | FormAsyncValidateOrFn, 19 | TSubmitMeta, 20 | >( 21 | opts?: FormOptions< 22 | TFormData, 23 | TOnMount, 24 | TOnChange, 25 | TOnChangeAsync, 26 | TOnBlur, 27 | TOnBlurAsync, 28 | TOnSubmit, 29 | TOnSubmitAsync, 30 | TOnServer, 31 | TSubmitMeta 32 | >, 33 | ) { 34 | const api = new FormApi< 35 | TFormData, 36 | TOnMount, 37 | TOnChange, 38 | TOnChangeAsync, 39 | TOnBlur, 40 | TOnBlurAsync, 41 | TOnSubmit, 42 | TOnSubmitAsync, 43 | TOnServer, 44 | TSubmitMeta 45 | >(opts) 46 | 47 | injectStore(api.store, (state) => state.isSubmitting) 48 | 49 | return api 50 | } 51 | -------------------------------------------------------------------------------- /packages/angular-form/tests/test-setup.ts: -------------------------------------------------------------------------------- 1 | import '@analogjs/vite-plugin-angular/setup-vitest' 2 | import '@testing-library/jest-dom/vitest' 3 | 4 | import { 5 | BrowserDynamicTestingModule, 6 | platformBrowserDynamicTesting, 7 | } from '@angular/platform-browser-dynamic/testing' 8 | import { getTestBed } from '@angular/core/testing' 9 | 10 | getTestBed().initTestEnvironment( 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting(), 13 | ) 14 | -------------------------------------------------------------------------------- /packages/angular-form/tests/utils.ts: -------------------------------------------------------------------------------- 1 | export function sleep(timeout: number): Promise { 2 | return new Promise((resolve, _reject) => { 3 | setTimeout(resolve, timeout) 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /packages/angular-form/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/ng-packagr/lib/ts/conf/tsconfig.ngc.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "module": "ESNext", 6 | "moduleDetection": "force", 7 | "moduleResolution": "Bundler" 8 | }, 9 | "angularCompilerOptions": { 10 | "enableI18nLegacyMessageIdFormat": false, 11 | "strictInjectionParameters": true, 12 | "strictInputAccessModifiers": true 13 | }, 14 | "include": ["src"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/angular-form/tsconfig.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@tanstack/form-core": ["../form-core/src"] 6 | } 7 | }, 8 | "include": ["src"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/angular-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "emitDecoratorMetadata": true, 5 | "experimentalDecorators": true, 6 | "moduleResolution": "Bundler", 7 | "useDefineForClassFields": false, 8 | "paths": { 9 | "@tanstack/form-core": ["../form-core/src"] 10 | } 11 | }, 12 | "include": ["src", "tests", "eslint.config.js", "vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/angular-form/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | import packageJson from './package.json' 3 | 4 | export default defineConfig({ 5 | test: { 6 | name: packageJson.name, 7 | dir: './tests', 8 | watch: false, 9 | environment: 'jsdom', 10 | setupFiles: ['./tests/test-setup.ts'], 11 | coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, 12 | typecheck: { enabled: true }, 13 | globals: true, 14 | restoreMocks: true, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/form-core/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/form-core/src/formOptions.ts: -------------------------------------------------------------------------------- 1 | import type { FormOptions } from './FormApi' 2 | 3 | export function formOptions< 4 | T extends Partial< 5 | FormOptions 6 | >, 7 | >(defaultOpts: T) { 8 | return defaultOpts 9 | } 10 | -------------------------------------------------------------------------------- /packages/form-core/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './FormApi' 2 | export * from './FieldApi' 3 | export * from './utils' 4 | export * from './util-types' 5 | export * from './types' 6 | export * from './mergeForm' 7 | export * from './formOptions' 8 | export * from './standardSchemaValidator' 9 | -------------------------------------------------------------------------------- /packages/form-core/tests/formOptions.spec.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest' 2 | import { FormApi, formOptions } from '../src/index' 3 | 4 | describe('formOptions', () => { 5 | it('should allow default values to be set', async () => { 6 | type Person = { 7 | firstName: string 8 | lastName: string 9 | } 10 | 11 | const formOpts = formOptions({ 12 | defaultValues: { 13 | firstName: 'FirstName', 14 | lastName: 'LastName', 15 | } as Person, 16 | }) 17 | 18 | const form = new FormApi({ 19 | ...formOpts, 20 | }) 21 | 22 | expect(form.state.values['firstName']).toBe('FirstName') 23 | expect(form.state.values['lastName']).toBe('LastName') 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /packages/form-core/tests/utils.ts: -------------------------------------------------------------------------------- 1 | export function sleep(timeout: number): Promise { 2 | return new Promise((resolve) => { 3 | setTimeout(resolve, timeout) 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /packages/form-core/tsconfig.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["tests"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/form-core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "moduleResolution": "Bundler" 5 | }, 6 | "include": ["src", "tests", "eslint.config.js", "vite.config.ts"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/form-core/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import packageJson from './package.json' 4 | 5 | const config = defineConfig({ 6 | test: { 7 | name: packageJson.name, 8 | dir: './tests', 9 | watch: false, 10 | environment: 'jsdom', 11 | coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, 12 | typecheck: { enabled: true }, 13 | }, 14 | }) 15 | 16 | export default mergeConfig( 17 | config, 18 | tanstackViteConfig({ 19 | entry: './src/index.ts', 20 | srcDir: './src', 21 | }), 22 | ) 23 | -------------------------------------------------------------------------------- /packages/lit-form/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/lit-form/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | export { TanStackFormController } from './tanstack-form-controller.js' 3 | -------------------------------------------------------------------------------- /packages/lit-form/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "moduleResolution": "Bundler", 5 | "rootDir": "src", 6 | "outDir": "dist", 7 | "noEmit": false, 8 | "declaration": true, 9 | "sourceMap": true 10 | }, 11 | "include": ["src"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/lit-form/tsconfig.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@tanstack/form-core": ["../form-core/src"] 6 | } 7 | }, 8 | "exclude": ["tests", "eslint.config.js", "vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/lit-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "moduleResolution": "Bundler" 5 | }, 6 | "include": ["src", "tests", "eslint.config.js", "vite.config.ts"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/lit-form/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | import packageJson from './package.json' 3 | 4 | export default defineConfig({ 5 | test: { 6 | name: packageJson.name, 7 | dir: './tests', 8 | watch: false, 9 | environment: 'jsdom', 10 | globals: true, 11 | coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, 12 | typecheck: { enabled: true }, 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/react-form/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import pluginReact from '@eslint-react/eslint-plugin' 4 | import reactCompiler from 'eslint-plugin-react-compiler' 5 | import pluginReactHooks from 'eslint-plugin-react-hooks' 6 | import rootConfig from '../../eslint.config.js' 7 | 8 | export default [ 9 | ...rootConfig, 10 | { 11 | files: ['**/*.{ts,tsx}'], 12 | ...pluginReact.configs.recommended, 13 | }, 14 | { 15 | plugins: { 16 | 'react-hooks': pluginReactHooks, 17 | 'react-compiler': reactCompiler, 18 | }, 19 | rules: { 20 | 'react-hooks/exhaustive-deps': 'error', 21 | 'react-hooks/rules-of-hooks': 'error', 22 | 'react-compiler/react-compiler': 'error', 23 | }, 24 | }, 25 | ] 26 | -------------------------------------------------------------------------------- /packages/react-form/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | 3 | export { useStore } from '@tanstack/react-store' 4 | 5 | export type { ReactFormApi, ReactFormExtendedApi } from './useForm' 6 | export { useForm } from './useForm' 7 | 8 | export type { UseField, FieldComponent } from './useField' 9 | export { useField, Field } from './useField' 10 | 11 | export { useTransform } from './useTransform' 12 | 13 | export type { WithFormProps } from './createFormHook' 14 | export { createFormHook, createFormHookContexts } from './createFormHook' 15 | -------------------------------------------------------------------------------- /packages/react-form/src/nextjs/error.ts: -------------------------------------------------------------------------------- 1 | import type { ServerFormState } from './types' 2 | import type { FormAsyncValidateOrFn } from '@tanstack/form-core' 3 | 4 | interface ServerValidateErrorState< 5 | TFormData, 6 | TOnServer extends undefined | FormAsyncValidateOrFn, 7 | > { 8 | formState: ServerFormState 9 | } 10 | 11 | export class ServerValidateError< 12 | TFormData, 13 | TOnServer extends undefined | FormAsyncValidateOrFn, 14 | > 15 | extends Error 16 | implements ServerValidateErrorState 17 | { 18 | formState: ServerFormState 19 | 20 | constructor(options: ServerValidateErrorState) { 21 | super('Your form has errors. Please check the fields and try again.') 22 | this.name = 'ServerValidateError' 23 | this.formState = options.formState 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-form/src/nextjs/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | 3 | export * from './createServerValidate' 4 | export * from './error' 5 | export * from './types' 6 | -------------------------------------------------------------------------------- /packages/react-form/src/nextjs/types.ts: -------------------------------------------------------------------------------- 1 | import type { FormAsyncValidateOrFn, FormState } from '@tanstack/form-core' 2 | 3 | export type ServerFormState< 4 | TFormData, 5 | TOnServer extends undefined | FormAsyncValidateOrFn, 6 | > = Pick< 7 | FormState< 8 | TFormData, 9 | undefined, 10 | undefined, 11 | undefined, 12 | undefined, 13 | undefined, 14 | undefined, 15 | undefined, 16 | TOnServer 17 | >, 18 | 'values' | 'errors' | 'errorMap' 19 | > 20 | -------------------------------------------------------------------------------- /packages/react-form/src/remix/error.ts: -------------------------------------------------------------------------------- 1 | import type { ServerFormState } from './types' 2 | import type { FormAsyncValidateOrFn } from '@tanstack/form-core' 3 | 4 | interface ServerValidateErrorState< 5 | TFormData, 6 | TOnServer extends undefined | FormAsyncValidateOrFn, 7 | > { 8 | formState: ServerFormState 9 | } 10 | 11 | export class ServerValidateError< 12 | TFormData, 13 | TOnServer extends undefined | FormAsyncValidateOrFn, 14 | > 15 | extends Error 16 | implements ServerValidateErrorState 17 | { 18 | formState: ServerFormState 19 | 20 | constructor(options: ServerValidateErrorState) { 21 | super('Your form has errors. Please check the fields and try again.') 22 | this.name = 'ServerValidateError' 23 | this.formState = options.formState 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-form/src/remix/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | 3 | export * from './createServerValidate' 4 | export * from './error' 5 | export * from './types' 6 | -------------------------------------------------------------------------------- /packages/react-form/src/remix/types.ts: -------------------------------------------------------------------------------- 1 | import type { FormAsyncValidateOrFn, FormState } from '@tanstack/form-core' 2 | 3 | export type ServerFormState< 4 | TFormData, 5 | TOnServer extends undefined | FormAsyncValidateOrFn, 6 | > = Pick< 7 | FormState< 8 | TFormData, 9 | undefined, 10 | undefined, 11 | undefined, 12 | undefined, 13 | undefined, 14 | undefined, 15 | undefined, 16 | TOnServer 17 | >, 18 | 'values' | 'errors' | 'errorMap' 19 | > 20 | -------------------------------------------------------------------------------- /packages/react-form/src/start/error.ts: -------------------------------------------------------------------------------- 1 | import type { ServerFormState } from './types' 2 | import type { FormAsyncValidateOrFn } from '@tanstack/form-core' 3 | 4 | interface ServerValidateErrorState< 5 | TFormData, 6 | TOnServer extends undefined | FormAsyncValidateOrFn, 7 | > { 8 | formState: ServerFormState 9 | response: Response 10 | } 11 | 12 | export class ServerValidateError< 13 | TFormData, 14 | TOnServer extends undefined | FormAsyncValidateOrFn, 15 | > 16 | extends Error 17 | implements ServerValidateErrorState 18 | { 19 | formState: ServerFormState 20 | response: Response 21 | 22 | constructor(options: ServerValidateErrorState) { 23 | super('Your form has errors. Please check the fields and try again.') 24 | this.name = 'ServerValidateError' 25 | this.response = options.response 26 | this.formState = options.formState 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-form/src/start/getFormData.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | deleteInternalTanStackCookie, 3 | getInternalTanStackCookie, 4 | } from './utils' 5 | import type { ServerFormState } from './types' 6 | 7 | export const initialFormState = { 8 | errorMap: { 9 | onServer: undefined, 10 | }, 11 | errors: [], 12 | } 13 | 14 | export const getFormData = async () => { 15 | const data = getInternalTanStackCookie() as 16 | | undefined 17 | | ServerFormState 18 | // Delete the temporary cookie from the client after reading it 19 | deleteInternalTanStackCookie() 20 | if (!data) return initialFormState 21 | return data 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-form/src/start/index.ts: -------------------------------------------------------------------------------- 1 | export * from './createServerValidate' 2 | export * from './getFormData' 3 | export * from './error' 4 | export * from './types' 5 | -------------------------------------------------------------------------------- /packages/react-form/src/start/types.ts: -------------------------------------------------------------------------------- 1 | import type { FormAsyncValidateOrFn, FormState } from '@tanstack/form-core' 2 | 3 | export type ServerFormState< 4 | TFormData, 5 | TOnServer extends undefined | FormAsyncValidateOrFn, 6 | > = Pick< 7 | FormState< 8 | TFormData, 9 | undefined, 10 | undefined, 11 | undefined, 12 | undefined, 13 | undefined, 14 | undefined, 15 | undefined, 16 | TOnServer 17 | >, 18 | 'values' | 'errors' | 'errorMap' 19 | > 20 | -------------------------------------------------------------------------------- /packages/react-form/src/start/utils.ts: -------------------------------------------------------------------------------- 1 | import { 2 | deleteCookie, 3 | getCookie, 4 | setCookie, 5 | } from '@tanstack/react-start/server' 6 | import { parse, stringify } from 'devalue' 7 | 8 | const _INTERNALS_COOKIE_NAME = '_tanstack_form_internals' 9 | 10 | export const setInternalTanStackCookie = (data: any) => { 11 | const cookie = stringify(data) 12 | setCookie(_INTERNALS_COOKIE_NAME, cookie) 13 | } 14 | 15 | export const getInternalTanStackCookie = () => { 16 | const cookie = getCookie(_INTERNALS_COOKIE_NAME) 17 | if (!cookie) return undefined 18 | return parse(cookie) 19 | } 20 | 21 | export const deleteInternalTanStackCookie = () => { 22 | deleteCookie(_INTERNALS_COOKIE_NAME) 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-form/src/useIsomorphicLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useLayoutEffect } from 'react' 2 | 3 | export const useIsomorphicLayoutEffect = 4 | typeof window !== 'undefined' ? useLayoutEffect : useEffect 5 | -------------------------------------------------------------------------------- /packages/react-form/src/useTransform.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | AnyFormApi, 3 | FormApi, 4 | FormAsyncValidateOrFn, 5 | FormTransform, 6 | FormValidateOrFn, 7 | } from '@tanstack/form-core' 8 | 9 | export function useTransform( 10 | fn: (formBase: AnyFormApi) => AnyFormApi, 11 | deps: unknown[], 12 | ): FormTransform { 13 | return { 14 | fn, 15 | deps, 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-form/tests/test-setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest' 2 | import { cleanup } from '@testing-library/react' 3 | import { afterEach } from 'vitest' 4 | 5 | // https://testing-library.com/docs/react-testing-library/api#cleanup 6 | afterEach(() => cleanup()) 7 | -------------------------------------------------------------------------------- /packages/react-form/tests/useTransform.test-d.tsx: -------------------------------------------------------------------------------- 1 | import { expectTypeOf, it } from 'vitest' 2 | import { formOptions, mergeForm, useForm, useTransform } from '../src' 3 | import type { ServerFormState } from '../src/nextjs/types' 4 | 5 | it('should maintain the type of the form', () => { 6 | const state = {} as ServerFormState 7 | 8 | const formOpts = formOptions({ 9 | defaultValues: { 10 | firstName: '', 11 | age: 123, 12 | } as const, 13 | }) 14 | 15 | function Comp() { 16 | const form = useForm({ 17 | ...formOpts, 18 | transform: useTransform( 19 | (baseForm) => mergeForm(baseForm, state), 20 | [state], 21 | ), 22 | }) 23 | 24 | expectTypeOf(form.state.values.age).toEqualTypeOf<123>() 25 | expectTypeOf(form.state.values.firstName).toEqualTypeOf<''>() 26 | } 27 | }) 28 | -------------------------------------------------------------------------------- /packages/react-form/tests/utils.ts: -------------------------------------------------------------------------------- 1 | export function sleep(timeout: number): Promise { 2 | return new Promise((resolve, _reject) => { 3 | setTimeout(resolve, timeout) 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-form/tsconfig.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@tanstack/form-core": ["../form-core/src"] 6 | } 7 | }, 8 | "exclude": ["tests", "eslint.config.js", "vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "moduleResolution": "Bundler", 6 | "paths": { 7 | "@tanstack/form-core": ["../form-core/src"] 8 | } 9 | }, 10 | "include": ["src", "tests", "eslint.config.js", "vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-form/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import react from '@vitejs/plugin-react' 4 | import packageJson from './package.json' 5 | 6 | const config = defineConfig({ 7 | plugins: [react()], 8 | test: { 9 | name: packageJson.name, 10 | dir: './tests', 11 | watch: false, 12 | environment: 'jsdom', 13 | setupFiles: ['./tests/test-setup.ts'], 14 | coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, 15 | typecheck: { enabled: true }, 16 | }, 17 | }) 18 | 19 | export default mergeConfig( 20 | config, 21 | tanstackViteConfig({ 22 | entry: [ 23 | './src/index.ts', 24 | './src/nextjs/index.ts', 25 | './src/remix/index.ts', 26 | './src/start/index.ts', 27 | ], 28 | srcDir: './src', 29 | }), 30 | ) 31 | -------------------------------------------------------------------------------- /packages/solid-form/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/solid-form/src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | 3 | export { useStore } from '@tanstack/solid-store' 4 | 5 | export { createForm, type SolidFormApi } from './createForm' 6 | 7 | export type { CreateField, FieldComponent } from './createField' 8 | export { createField, Field } from './createField' 9 | -------------------------------------------------------------------------------- /packages/solid-form/tests/test-setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest' 2 | import { cleanup } from '@solidjs/testing-library' 3 | import { afterEach } from 'vitest' 4 | 5 | // https://github.com/solidjs/solid-testing-library 6 | afterEach(() => cleanup()) 7 | -------------------------------------------------------------------------------- /packages/solid-form/tests/utils.ts: -------------------------------------------------------------------------------- 1 | export function sleep(timeout: number): Promise { 2 | return new Promise((resolve, _reject) => { 3 | setTimeout(resolve, timeout) 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /packages/solid-form/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "jsxImportSource": "solid-js", 6 | "moduleResolution": "Bundler", 7 | "rootDir": "src", 8 | "outDir": "dist/source", 9 | "noEmit": false, 10 | "declaration": true, 11 | "sourceMap": true, 12 | "paths": { 13 | "@tanstack/form-core": ["../../form-core/src"] 14 | } 15 | }, 16 | "include": ["src"] 17 | } 18 | -------------------------------------------------------------------------------- /packages/solid-form/tsconfig.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@tanstack/form-core": ["../form-core/src"] 6 | } 7 | }, 8 | "exclude": ["tests", "eslint.config.js", "vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/solid-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "jsxImportSource": "solid-js", 6 | "moduleResolution": "Bundler", 7 | "paths": { 8 | "@tanstack/form-core": ["../form-core/src"] 9 | } 10 | }, 11 | "include": ["src", "tests", "eslint.config.js", "vite.config.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/solid-form/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import solid from 'vite-plugin-solid' 4 | import packageJson from './package.json' 5 | 6 | const config = defineConfig({ 7 | plugins: [solid()], 8 | test: { 9 | name: packageJson.name, 10 | dir: './tests', 11 | watch: false, 12 | environment: 'jsdom', 13 | setupFiles: ['./tests/test-setup.ts'], 14 | coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, 15 | typecheck: { enabled: true }, 16 | }, 17 | }) 18 | 19 | export default mergeConfig( 20 | config, 21 | tanstackViteConfig({ 22 | entry: ['./src/index.tsx'], 23 | srcDir: './src', 24 | }), 25 | ) 26 | -------------------------------------------------------------------------------- /packages/svelte-form/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/svelte-form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/svelte-form", 3 | "version": "1.12.0", 4 | "description": "Powerful, type-safe forms for Svelte.", 5 | "author": "tannerlinsley", 6 | "license": "MIT", 7 | "keywords": [ 8 | "svelte" 9 | ], 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/TanStack/form.git", 13 | "directory": "packages/svelte-form" 14 | }, 15 | "homepage": "https://tanstack.com/form", 16 | "scripts": { 17 | "clean": "premove ./dist ./coverage", 18 | "test:eslint": "eslint ./src ./tests", 19 | "test:types": "svelte-check", 20 | "test:lib": "vitest", 21 | "test:lib:dev": "pnpm run test:lib --watch", 22 | "test:build": "publint --strict", 23 | "build": "svelte-package --input ./src --output ./dist" 24 | }, 25 | "type": "module", 26 | "types": "dist/index.d.ts", 27 | "module": "dist/index.js", 28 | "svelte": "./dist/index.js", 29 | "exports": { 30 | ".": { 31 | "types": "./dist/index.d.ts", 32 | "svelte": "./dist/index.js", 33 | "import": "./dist/index.js" 34 | }, 35 | "./package.json": "./package.json" 36 | }, 37 | "sideEffects": false, 38 | "files": [ 39 | "dist", 40 | "src" 41 | ], 42 | "dependencies": { 43 | "@tanstack/form-core": "workspace:*", 44 | "@tanstack/svelte-store": "^0.7.1" 45 | }, 46 | "devDependencies": { 47 | "@sveltejs/package": "^2.3.11", 48 | "@sveltejs/vite-plugin-svelte": "^5.0.3", 49 | "@testing-library/svelte": "^5.2.8", 50 | "svelte": "^5.33.13", 51 | "svelte-check": "^4.2.1" 52 | }, 53 | "peerDependencies": { 54 | "svelte": "^5.0.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/svelte-form/src/Subscribe.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | {@render children(value.current)} 17 | -------------------------------------------------------------------------------- /packages/svelte-form/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | 3 | export { useStore } from '@tanstack/svelte-store' 4 | 5 | export { createForm, type SvelteFormApi } from './createForm.svelte.js' 6 | 7 | export { default as Field, createField } from './Field.svelte' 8 | 9 | export type { CreateField, FieldComponent } from './types.js' 10 | -------------------------------------------------------------------------------- /packages/svelte-form/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | const config = { 4 | preprocess: vitePreprocess(), 5 | } 6 | 7 | export default config 8 | -------------------------------------------------------------------------------- /packages/svelte-form/tests/test-setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest' 2 | -------------------------------------------------------------------------------- /packages/svelte-form/tsconfig.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@tanstack/form-core": ["../form-core/src"] 6 | } 7 | }, 8 | "exclude": ["tests", "eslint.config.js", "vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelte-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "module": "NodeNext", 5 | "moduleResolution": "NodeNext" 6 | }, 7 | "include": ["src", "tests", "*.config.js", "*.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelte-form/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | import { svelteTesting } from '@testing-library/svelte/vite' 4 | import packageJson from './package.json' with { type: 'json' } 5 | 6 | export default defineConfig({ 7 | plugins: [svelte(), svelteTesting()], 8 | test: { 9 | name: packageJson.name, 10 | dir: './tests', 11 | watch: false, 12 | environment: 'jsdom', 13 | setupFiles: ['./tests/test-setup.ts'], 14 | coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, 15 | typecheck: { enabled: true }, 16 | }, 17 | resolve: process.env.VITEST 18 | ? { 19 | conditions: ['browser'], 20 | } 21 | : undefined, 22 | }) 23 | -------------------------------------------------------------------------------- /packages/vue-form/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/vue-form/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@tanstack/form-core' 2 | export { useStore } from '@tanstack/vue-store' 3 | export * from './useField' 4 | export * from './useForm' 5 | -------------------------------------------------------------------------------- /packages/vue-form/tests/test-setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest' 2 | import { cleanup } from '@testing-library/vue' 3 | import { afterEach } from 'vitest' 4 | 5 | // https://testing-library.com/docs/vue-testing-library/api#cleanup 6 | afterEach(() => cleanup()) 7 | -------------------------------------------------------------------------------- /packages/vue-form/tests/utils.ts: -------------------------------------------------------------------------------- 1 | export function sleep(timeout: number): Promise { 2 | return new Promise((resolve, _reject) => { 3 | setTimeout(resolve, timeout) 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue-form/tsconfig.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@tanstack/form-core": ["../form-core/src"] 6 | } 7 | }, 8 | "exclude": ["tests", "eslint.config.js", "vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/vue-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "jsxImportSource": "vue", 6 | "moduleResolution": "Bundler", 7 | "types": ["vue/jsx", "@testing-library/jest-dom"], 8 | "paths": { 9 | "@tanstack/form-core": ["../form-core/src"] 10 | } 11 | }, 12 | "include": ["src", "tests", "eslint.config.js", "vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/vue-form/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import packageJson from './package.json' 5 | 6 | const config = defineConfig({ 7 | plugins: [vue()], 8 | test: { 9 | name: packageJson.name, 10 | dir: './tests', 11 | watch: false, 12 | environment: 'jsdom', 13 | setupFiles: ['./tests/test-setup.ts'], 14 | coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, 15 | typecheck: { enabled: true }, 16 | }, 17 | esbuild: { 18 | jsxFactory: 'h', 19 | jsxFragment: 'Fragment', 20 | }, 21 | }) 22 | 23 | export default mergeConfig( 24 | config, 25 | tanstackViteConfig({ 26 | entry: './src/index.ts', 27 | srcDir: './src', 28 | }), 29 | ) 30 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/**' 3 | - 'examples/angular/**' 4 | - 'examples/react/**' 5 | - 'examples/solid/**' 6 | - 'examples/vue/**' 7 | - 'examples/lit/**' 8 | - 'examples/svelte/**' 9 | -------------------------------------------------------------------------------- /scripts/publish.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import { resolve } from 'node:path' 4 | import { fileURLToPath } from 'node:url' 5 | import { publish } from '@tanstack/config/publish' 6 | 7 | const __dirname = fileURLToPath(new URL('.', import.meta.url)) 8 | 9 | await publish({ 10 | packages: [ 11 | { 12 | name: '@tanstack/angular-form', 13 | packageDir: 'packages/angular-form', 14 | }, 15 | { 16 | name: '@tanstack/form-core', 17 | packageDir: 'packages/form-core', 18 | }, 19 | { 20 | name: '@tanstack/lit-form', 21 | packageDir: 'packages/lit-form', 22 | }, 23 | { 24 | name: '@tanstack/react-form', 25 | packageDir: 'packages/react-form', 26 | }, 27 | { 28 | name: '@tanstack/solid-form', 29 | packageDir: 'packages/solid-form', 30 | }, 31 | { 32 | name: '@tanstack/svelte-form', 33 | packageDir: 'packages/svelte-form', 34 | }, 35 | { 36 | name: '@tanstack/vue-form', 37 | packageDir: 'packages/vue-form', 38 | }, 39 | ], 40 | branchConfigs: { 41 | main: { 42 | prerelease: false, 43 | }, 44 | alpha: { 45 | prerelease: true, 46 | }, 47 | beta: { 48 | prerelease: true, 49 | }, 50 | }, 51 | rootDir: resolve(__dirname, '..'), 52 | branch: process.env.BRANCH, 53 | tag: process.env.TAG, 54 | ghToken: process.env.GH_TOKEN, 55 | }) 56 | 57 | process.exit(0) 58 | -------------------------------------------------------------------------------- /scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "moduleResolution": "Bundler" 5 | }, 6 | "include": ["**/*"] 7 | } 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "allowSyntheticDefaultImports": true, 6 | "allowUnreachableCode": false, 7 | "allowUnusedLabels": false, 8 | "checkJs": true, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "isolatedModules": true, 13 | "lib": ["DOM", "DOM.Iterable", "ES2022"], 14 | "module": "ES2022", 15 | "moduleResolution": "Node", 16 | "noEmit": true, 17 | "noImplicitReturns": true, 18 | "noUncheckedIndexedAccess": true, 19 | "noUnusedLocals": false, // TODO enable 20 | "noUnusedParameters": true, 21 | "resolveJsonModule": true, 22 | "skipLibCheck": true, 23 | "strict": true, 24 | "target": "ES2020", 25 | "types": ["@testing-library/jest-dom"] 26 | }, 27 | "include": ["eslint.config.js", "prettier.config.js"] 28 | } 29 | --------------------------------------------------------------------------------