tanstack-form-patternslisted
Install: claude install-skill smicolon/ai-kit
# TanStack Form Patterns
This skill enforces TanStack Form best practices for type-safe forms with Zod validation.
## Basic Form Setup
```typescript
import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
const postSchema = z.object({
title: z.string().min(3, 'Title must be at least 3 characters'),
content: z.string().min(10, 'Content must be at least 10 characters'),
published: z.boolean().default(false),
tags: z.array(z.string()).min(1, 'At least one tag required'),
})
type PostFormData = z.infer<typeof postSchema>
export function PostForm({ onSubmit }: { onSubmit: (data: PostFormData) => void }) {
const form = useForm({
defaultValues: {
title: '',
content: '',
published: false,
tags: [],
} satisfies PostFormData,
onSubmit: async ({ value }) => {
onSubmit(value)
},
validatorAdapter: zodValidator(),
validators: {
onChange: postSchema,
},
})
return (
<form
onSubmit={(e) => {
e.preventDefault()
form.handleSubmit()
}}
>
{/* Form fields */}
</form>
)
}
```
## Field Components
### Text Input Field
```typescript
<form.Field
name="title"
children={(field) => (
<div className="field">
<label htmlFor={field.name}>Title</label>
<input
id={field.name}
name={field.name}
value={field.state.value}
onChange={(e) => field.handleChange(