From web
Builds type-safe, accessible forms with TanStack Form, Base UI Field, and the useAppForm hook. Use when creating forms, adding validation, handling form submission, or working with form fields and form state management.
How this skill is triggered — by the user, by Claude, or both
Slash command
/web:tanstack-formThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
TanStack Form with Base UI Field for accessible, type-safe forms. The `useAppForm` hook (from `@/components/form`) provides pre-configured form and field components integrated with shadcn's Button and Label.
TanStack Form with Base UI Field for accessible, type-safe forms. The useAppForm hook (from @/components/form) provides pre-configured form and field components integrated with shadcn's Button and Label.
useAppForm — never raw TanStack Form hooksvalidators.onSubmitfield.Control with render prop to bind UI componentsfield.Root, field.Label, field.Control, and field.ErrorMessageimport { z } from "zod";
import { useAppForm } from "@/components/form";
| Component | Use |
|---|---|
form.Root | Wrapper — provides form context, handles submit |
form.AppField | Creates a field with access to field sub-components |
form.Submit | Submit button — auto-disables when pristine/invalid/submitting |
form.Subscribe | Subscribe to form state for custom rendering |
All components available inside form.AppField render callback:
| Component | Use |
|---|---|
field.Root | Wraps field, connects aria-invalid and aria-describedby |
field.Label | Label — auto-connects to input via for/id |
field.Control | Input wrapper — handles value/onChange binding |
field.ErrorMessage | Shows validation errors |
render prop customizes the underlying element while keeping form state binding:
<field.Root render={<InputGroup.Root />}>
<field.Control render={<InputGroup.Input placeholder="Email" />} />
</field.Root>
| API | Use |
|---|---|
form.reset() | Reset to default values |
form.setFieldValue("name", value) | Set field value |
form.state.values | Get current values |
form.validate() | Trigger validation |
Base UI Field automatically handles — no manual wiring needed:
aria-invalid on invalid fieldsaria-describedby linking inputs to error messagesfor/id linking labels to inputsSee examples/ for complete form examples by pattern:
| Example | When to use |
|---|---|
examples/basic-form.md | Simple form with validation and submission |
examples/polymorphic-fields.md | Custom UI components with render prop |
useAppForm from @/components/formvalidators.onSubmitRoot, Label, Control, ErrorMessageform.Root as wrapper, form.Submit for submit buttonrender prop, not manual bindingnpx claudepluginhub kvnwolf/devtools --plugin webProvides headless, type-safe form state management and validation for React, Vue, Angular, Svelte, Solid, Lit with Zod/Valibot adapters.
TanStack Form v1 - type-safe forms with Zod/Yup/Valibot validation, async validation, arrays, nested fields, React 19 Server Actions
TanStack Form v1 for Next.js 16 with Server Actions, Zod validation, and shadcn/ui integration. Use when building forms, validation, multi-step wizards, or dynamic field arrays.