Form handling with Formisch, the schema-first and type-safe form library for Angular, Preact, Qwik, React, React Native, Solid, Svelte, and Vue. Use when creating forms, handling form state, validating inputs, working with field arrays, or using @formisch/* packages.

Formisch This skill helps AI agents work effectively with [Formisch](https://formisch.dev/), the schema based, headless form library for modern frameworks. When to Use This Skill When the user asks about form handling with Formisch When managing form state and validation When working with Angular, Preact, Qwik, React, React Native, Solid, Svelte, or Vue forms When integrating Valibot schemas with forms Introduction Formisch is a schema based, headless form library that works across multiple frameworks. Key highlights: Small bundle size — Starting at ~2.5 kB Schema based validation — Uses Valibot for type safe validation Headless design — You control the UI completely Type safety — Full TypeScript support with autocompletion Framework native — Native performance for each supported framework Supported Frameworks Framework Package Hook/Primitive Angular @formisch/angular injectForm Preact @formisch/preact useForm Qwik @formisch/qwik useForm$ React @formisch/react useForm React Native @formisch/react native useForm SolidJS @formisch/solid createForm Svelte @formisch/svelte createForm Vue @formisch/vue useForm Installation 1. Install Valibot (peer dependency) 2. Install Formisch for your framework Core Concepts Schema First Design Every form starts with a Valibot schema. Types are automatically inferred from the schema. Form Store The form store manages all form state. Access it via the framework specific hook/primitive. Form Store Properties: isSubmitting — Form is currently being submitted isSubmitted — Form submission has been attempted isValidating — Validation is in progress isTouched — At least one field has been touched isEdited — At least one field has been edited isDirty — At least one field differs from initial value isValid — All fields pass validation errors — Root level validation errors Field Store Each field has its own reactive store with: path — Path array to the field input — Current field value errors — Field specific errors isTouched — Field has been focused isEdited — Field value has been edited isDirty — Field value differs from initial value isValid — Field passes validation props — Props to spread onto native elements (Angular connects controls with [formischControl] instead) onChange (React and React Native) / onInput (Solid, Svelte, Preact, and Qwik) / setInput (Angular) — Sets the field input value programmatically. Use this when the field cannot be connected to a native element. In Vue, set field.input directly (for example with v model ). Store reactivity is framework specific. React, React Native, Solid, Svelte, and Vue expose plain reactive properties. Angular properties are signals and are called like field.errors() , except path , which is a plain value. Preact and Qwik properties are signals; use .value in conditions and ordinary TypeScript logic. Do not copy one framework's access syntax into another. Dirty Tracking Formisch tracks two inputs per field: Initial input — Baseline for dirty tracking (server state) Current input — What the user is editing (client state) isDirty becomes true when current input differs from initial input. Framework Examples Angular Example Angular uses signals, dependency injection, and directives instead of a JSX component API. Let [formischControl] synchronize the native control. Do not add competing [value] or [checked] bindings except when value identifies an option in a radio or checkbox group. React Native Example React Native has no DOM <form element or Formisch Form component. Use handleSubmit and bind field.props to TextInput . React Native text inputs are controlled, so always pass value={field.input} . Use field.onChange(value) for switches, sliders, pickers, and non string values. React Example Vue Example SolidJS Example Svelte Example Qwik Example Form Configuration In Qwik, useForm$ must receive a function that returns the config, e.g. useForm$(() = ({ schema: MySchema })) . This allows Qwik to convert the config into a QRL. Optional and nullable fields remain undefined . emptyInput only supplies fallbacks for required fields whose input is undefined . Field Paths Paths are type safe arrays that reference fields in your schema. Form Methods All methods follow a consistent API pattern: First parameter : Form store Second parameter : Config object Reading Values Form level form.errors and getErrors(form) contain only root level errors. Use the deep error methods when descendant field errors are needed. The singular variants getDeepError and getDeepErrorEntry stop at the first field with errors, which is useful for showing a single message for a nested structure. Reading Dirty State getDirtyInput returns raw form input. pickDirty applies the form's dirty mask to a supplied value, which is useful for validated and transformed submit output. The sibling methods isTouched , isEdited , and isValid follow the same pattern as isDirty . Each checks the entire form when called without a config, or a specific field and its descendants when called with a path . Setting Values reset also accepts the flags keepTouched , keepEdited , and keepErrors . The form level reset additionally accepts keepSubmitted . All flags default to false . Form Control submit requires a registered DOM form and is not exported by @formisch/react native . In React Native and in layouts without a <form element, call the function returned by handleSubmit instead. Field Arrays For dynamic lists of fields, use FieldArray with array manipulation methods. The field array store exposes path , items (stable item IDs for use as keys), errors , isTouched , isEdited , isDirty , and isValid . Schema React Example Array Methods TypeScript Integration Type Inference Types are automatically inferred from your Valibot schema: Input vs Output Types Schemas with transformations have different input and output types: Type Safe Props Pass forms to child components with proper typing: Generic Field Components Create reusable field components with proper typing: The v.GenericSchema<{ email: string } constraint accepts any form whose schema contains an email field of type string . TypeScript catches mismatches at compile time. Available Types Validation Timing validate Option Controls when the first validation occurs: Value Description 'initial' Validate immediately on form creation 'touch' Validate when a field is first focused 'input' Validate on every input event 'change' Validate on change events (value is committed) 'blur' Validate when field loses focus 'submit' Validate only on form submission (default) revalidate Option Controls when a field is validated again , once it already has an error or the form has been submitted: Value Description 'touch' Revalidate when a field is first focused 'input' Revalidate on every input event (default) 'change' Revalidate on change events (value is committed) 'blur' Revalidate when field loses focus 'submit' Revalidate only on form submission Special Inputs Select (Single) Select (Multiple) Checkbox File Input File inputs cannot be controlled. Handle via UI around them: useField Hook For complex field components, use the useField hook instead of the Field component: When to use which: Field component — Multiple fields in the same component useField hook — Single field with component logic access The useFieldArray hook is the equivalent counterpart of the FieldArray component. In Angular, use the injectField and injectFieldArray functions or the formischField and formischFieldArray directives. Using Component Libraries When using component libraries that don't expose their underlying native elements, you cannot spread field.props directly. Instead, update the value programmatically with field.onChange (React and React Native), field.onInput (Solid, Svelte, Preact, and Qwik), field.setInput (Angular), or by assigning to field.input (Vue): These setters update the field value and trigger validation, just like a native input would. This is useful for: Component libraries that wrap native elements without exposing them Complex custom inputs like date pickers, rich text editors, or color pickers Async Submission The form's isSubmitting state stays true until the async handler resolves. If the handler throws, Formisch catches the error and sets its message as a root level form error on form.errors . Common Patterns Loading State Submit on Enter Formisch handles this automatically via the native <form element. Reset After Success Server Data Sync When server data changes, update the baseline without losing user edits: Conditional Fields In React, calling getInput during render is reactive because useForm and useField enable signal tracking in the component that calls them. In the other frameworks, the read is tracked by their own reactive scopes. Additional Resources [Formisch Documentation](https://formisch.dev/) [Formisch Coding Agents Guide](https://formisch.dev/react/guides/coding agents/) Formisch MCP server: https://formisch.dev/mcp ( search docs , get doc , and list docs ) Append .md to any documentation URL for agent friendly Markdown, or use https://formisch.dev/llms {framework}.txt for a framework specific index [Formisch GitHub](https://github.com/open circle/formisch) [Valibot Documentation](https://valibot.dev/)