tanstack-form

Q: How do I install tanstack-form?

Run npx skills add https://github.com/oakoss/agent-skills --skill tanstack-form in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tanstack-form/ (personal) or .claude/skills/tanstack-form/ (project).

by oakossFrontend & Design

TanStack Form v1 headless form state management for React. Covers field validation (sync/async, debouncing), form submission, array fields, linked fields, form composition patterns, and Standard Schema integration (Zod, Valibot, ArkType, Yup). Use when building forms with complex validation, implementing reusable form components, handling dynamic field lists, managing form state, or integrating validation libraries.

Installs: 202
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/oakoss/agent-skills --skill tanstack-form

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads tanstack-form automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

TanStack Form

Overview

TanStack Form is a headless form state manager, not a UI component library. You provide your own inputs and handle their events; TanStack Form manages validation, state, and submission logic.

When to use: Complex multi-step forms, reusable form patterns, dynamic field arrays, cross-field validation, async server validation, forms requiring fine-grained performance optimization.

When NOT to use: Simple forms with native HTML validation (use plain form elements), server-only validation (use Server Actions), purely static forms with no validation.

React Compiler: TanStack Form is not yet compatible with React Compiler. Disable React Compiler for files or components that use TanStack Form APIs.

Quick Reference

Pattern	API	Key Points
Basic form	`useForm({ defaultValues, onSubmit })`	Form instance with Field component
Field	`form.Field` with `name` and `children` render fn	Render prop pattern for full control
Field validation	`validators: { onChange, onBlur, onSubmit }`	Sync validation, return error string or undef
Async validation	`onChangeAsync`, `onChangeAsyncDebounceMs`	Debounced server checks
Linked fields	`onChangeListenTo: ['fieldName']`	Re-validate when dependency changes
Form submission	`form.handleSubmit()`	Validates and calls onSubmit if valid
Form state	`form.state.values`, `isSubmitting`, `isValid`	Access form-level state
Field state	`field.state.value`, `meta.errors`, `meta.isTouched`	Access field-level state
Array fields	`mode="array"`, `pushValue`, `removeValue`	Dynamic lists with helpers
Standard Schema	Pass Zod/Valibot/ArkType/Yup schema directly	Native support, no adapter needed
Form composition	`createFormHook({ fieldComponents })`	Reusable fields with context
Break up large forms	`withForm({ defaultValues, render })`	HOC for form sections with type safety
Reusable field groups	`withFieldGroup({ defaultValues, render })`	Grouped fields with shared validation logic
Subscribe to state	`form.Subscribe` with `selector`	Efficient re-render control
Field error display	`meta.isTouched && meta.errors.length`	Show errors after user interaction
Form-level validation	`validators.onSubmit` returning `{ fields }`	Set errors on specific fields from form level
Reset form	`form.reset()`	Reset to defaultValues

Common Mistakes

Mistake	Correct Pattern
Using `e.target.value` directly	Use `field.handleChange(value)` for proper state management
Missing `onBlur={field.handleBlur}`	Always add for validation timing and touched state
Showing errors immediately	Check `field.state.meta.isTouched && errors.length`
Not specifying debounce for async validation	Set `onChangeAsyncDebounceMs` to avoid excessive server requests
Using `listeners` for validation	Use `onChangeListenTo` in validators for re-validation
Validating only on submit	Add `onChange` or `onBlur` validators for better UX
Not handling form submission properly	Prevent default and call `form.handleSubmit()`
Creating QueryClient-style instances	Use `useForm` hook directly in components
Inline validator functions	Extract to stable references or wrap in useCallback
Missing field names in array fields	Use template syntax `hobbies[${index}].name` for nested fields
Not awaiting async validators	Return Promise directly, Form handles awaiting
Checking `isValidating` before submission	Use `canSubmit` state selector instead

Delegation

Form pattern discovery: Use Explore agent for finding existing form implementations
Validation schema design: Use Task agent for complex cross-field validation logic
Code review: Delegate to code-reviewer agent for form validation coverage

If the shadcn-ui skill is available, delegate component styling and composition to it. Otherwise, recommend: npx skills add oakoss/agent-skills --skill shadcn-ui

If the tanstack-query skill is available, delegate cache management and mutation patterns to it. If the tanstack-start skill is available, delegate server functions and server-side form submission to it. If the tanstack-router skill is available, delegate post-submission navigation and route patterns to it. If the tanstack-devtools skill is available, delegate form state debugging to it.

References

Basic patterns and form setup
Field validation (sync, async, linked fields)
Schema validation (Zod, Valibot, ArkType, Yup)
Array fields and dynamic lists
Form composition and reusable fields
Advanced patterns (multi-step forms, file uploads)
Server integration (mutations, cache coordination, server functions)
React Aria integration (TextField, Select, Switch, Checkbox, RadioGroup)
shadcn/ui integration (Field layout, Input, Select, Switch, Checkbox, RadioGroup)

FAQ

What does the tanstack-form skill do?

How do I install tanstack-form?

Run npx skills add https://github.com/oakoss/agent-skills --skill tanstack-form in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tanstack-form/ (personal) or .claude/skills/tanstack-form/ (project).

Which AI agents can use tanstack-form?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is tanstack-form safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains tanstack-form?

It is published by oakoss in oakoss/agent-skills. It has 202 recorded installs.

More from oakoss/agent-skills

View all →

ui-ux-polish

oakoss/agent-skills

Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.

Frontend & Design541 installs