# TanStack Form · JGuang UI
> Build forms in React using TanStack Form and Zod.
- Page: https://jiguang132.com/systems/jguang-ui/docs/forms/tanstack-form
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
This guide explores how to build forms using TanStack Form. You'll learn to create forms with the `` component, implement schema validation with Zod, handle errors, and ensure accessibility.
## Demo
We'll start by building the following form. It has a simple text input and a textarea. On submit, we'll validate the form data and display any errors.
}>
**Note:** For the purpose of this demo, we have intentionally disabled browser
validation to show how schema validation and form errors work in TanStack
Form. It is recommended to add basic browser validation in your production
code.
> **Component preview · Base UI**
> `form-tanstack-demo`
## Approach
This form leverages TanStack Form for powerful, headless form handling. We'll build our form using the `` component, which gives you **complete flexibility over the markup and styling**.
- Uses TanStack Form's `useForm` hook for form state management.
- `form.Field` component with render prop pattern for controlled inputs.
- `` components for building accessible forms.
- Client-side validation using Zod.
- Real-time validation feedback.
## Anatomy
Here's a basic example of a form using TanStack Form with the `` component.
```tsx showLineNumbers {15-31}
```
## Form
### Create a schema
We'll start by defining the shape of our form using a Zod schema.
}>
**Note:** This example uses `zod v3` for schema validation. TanStack Form
integrates seamlessly with Zod and other Standard Schema validation libraries
through its validators API.
```tsx showLineNumbers title="form.tsx"
import * as z from "zod"
const formSchema = z.object({
title: z
.string()
.min(5, "Bug title must be at least 5 characters.")
.max(32, "Bug title must be at most 32 characters."),
description: z
.string()
.min(20, "Description must be at least 20 characters.")
.max(100, "Description must be at most 100 characters."),
})
```
### Set up the form
Use the `useForm` hook from TanStack Form to create your form instance with Zod validation.
```tsx showLineNumbers title="form.tsx" {10-21}
import { useForm } from "@tanstack/react-form"
import { toast } from "sonner"
import * as z from "zod"
const formSchema = z.object({
// ...
})
export function BugReportForm() {
const form = useForm({
defaultValues: {
title: "",
description: "",
},
validators: {
onSubmit: formSchema,
},
onSubmit: async ({ value }) => {
toast.success("Form submitted successfully")
},
})
return (
)
}
```
We are using `onSubmit` to validate the form data here. TanStack Form supports other validation modes, which you can read about in the [documentation](https://tanstack.com/form/latest/docs/framework/react/guides/dynamic-validation).
### Build the form
We can now build the form using the `form.Field` component from TanStack Form and the `` component.
[View complete source: form.tsx](/r/jguang-ui/base/component.json)
### Done
That's it. You now have a fully accessible form with client-side validation.
When you submit the form, the `onSubmit` function will be called with the validated form data. If the form data is invalid, TanStack Form will display the errors next to each field.
## Validation
### Client-side Validation
TanStack Form validates your form data using the Zod schema. Validation happens in real-time as the user types.
```tsx showLineNumbers title="form.tsx" {13-15}
import { useForm } from "@tanstack/react-form"
const formSchema = z.object({
// ...
})
export function BugReportForm() {
const form = useForm({
defaultValues: {
title: "",
description: "",
},
validators: {
onSubmit: formSchema,
},
onSubmit: async ({ value }) => {
console.log(value)
},
})
return
}
```
### Validation Modes
TanStack Form supports different validation strategies through the `validators` option:
| Mode | Description |
| ------------ | ------------------------------------ |
| `"onChange"` | Validation triggers on every change. |
| `"onBlur"` | Validation triggers on blur. |
| `"onSubmit"` | Validation triggers on submit. |
```tsx showLineNumbers title="form.tsx" {6-9}
const form = useForm({
defaultValues: {
title: "",
description: "",
},
validators: {
onSubmit: formSchema,
onChange: formSchema,
onBlur: formSchema,
},
})
```
## Displaying Errors
Display errors next to the field using ``. For styling and accessibility:
- Add the `data-invalid` prop to the `` component.
- Add the `aria-invalid` prop to the form control such as ``, ``, ``, etc.
```tsx showLineNumbers title="form.tsx" {4,18}
{
const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid
return (
Email
field.handleChange(e.target.value)}
type="email"
aria-invalid={isInvalid}
/>
{isInvalid && }
)
}}
/>
```
## Working with Different Field Types
### Input
- For input fields, use `field.state.value` and `field.handleChange` on the `` component.
- To show errors, add the `aria-invalid` prop to the `` component and the `data-invalid` prop to the `` component.
> **Component preview · Base UI**
> `form-tanstack-input`
```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```
### Textarea
- For textarea fields, use `field.state.value` and `field.handleChange` on the `` component.
- To show errors, add the `aria-invalid` prop to the `` component and the `data-invalid` prop to the `` component.
> **Component preview · Base UI**
> `form-tanstack-textarea`
```tsx showLineNumbers title="form.tsx" {6,13-16,24}
{
const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid
return (
More about you