To use them, you typically have to:

• Pass manual refs or spread registration handlers onto every single input: {...register("email")}
• Wrap custom component inputs in heavy <Controller /> components
• Manage complex context providers just to keep multi-step wizard values from vanishing when components unmount

I wondered: What if we treated standard HTML forms as the single source of truth again, without losing type safety or React ergonomics?

That is why I built Native Form.

What is Native Form?

Native Form is a zero-registration, DOM-first form runtime and validation engine for modern web apps.

• GitHub: github.com/sunilsv26/native-form
• npm: npm i @native-form/react

Instead of manually registering each input in JavaScript, Native Form leverages browser standards: it automatically discovers inputs directly from the DOM using standard HTML name attributes via a background MutationObserver.

Key Highlights

1. Zero Input Registration

Write clean, standard HTML inputs. No {...register()} spreads, no ref forwarding gymnastics:

<form ref={formRef} noValidate>
  <input name="email" type="email" />
  <input name="age" type="number" />
</form>

2. Microscopic Schema Adapters (< 500 Bytes)

Whether you use Zod, Valibot, or Yup, Native Form provides plug-and-play resolvers that add less than 500 bytes to your production bundle. The core runtime itself has zero third-party dependencies.

3. Built-in Multi-Step Wizard Memory

With preserveUnmountedValues: true and the useWizard hook, field values are automatically preserved in runtime memory even when wizard step components unmount from the DOM.

4. Cross-Platform Runtime

The foundation (@native-form/core) is completely framework-agnostic. You can use the exact same runtime in Vanilla JavaScript, Vue 3, Svelte, or Angular, while @native-form/react provides React 18 & 19 hooks.

Quick Example (React + Zod)

Here is how clean a form looks with Native Form:

import { useForm } from "@native-form/react";
import { zodResolver } from "@native-form/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Enter a valid email address"),
  age: z.number().min(18, "Must be at least 18"),
});

export function SignupForm() {
  const { formRef, formState } = useForm({
    schema: zodResolver(schema),
    serializationMode: "typed", // Automatically coerces type="number" and range sliders to JavaScript numbers
    onSubmit: (values) => {
      console.log("Validated submission:", values);
    },
  });

  return (
    <form ref={formRef} noValidate>
      <label>Email</label>
      <input name="email" type="email" placeholder="jane@example.com" />
      {formState.errors.email && (
        <span className="error">{formState.errors.email}</span>
      )}

      <label>Age</label>
      <input name="age" type="number" placeholder="25" />
      {formState.errors.age && (
        <span className="error">{formState.errors.age}</span>
      )}

      <button type="submit" disabled={formState.submitting}>
        {formState.submitting ? "Submitting..." : "Sign Up"}
      </button>
    </form>
  );
}

What’s New in v0.1.2?

We recently released v0.1.2, which includes:

• Range Slider Coercion: <input type="range"> automatically coerces to numbers for Zod z.number() validation.
• Immediate Discrete Control Re-Validation: Checkboxes and radio buttons clear errors immediately upon user selection without requiring blur events.
• Design System Isolation: Configurable renderDomErrors (defaulting to false in React) so custom UI frameworks like Material UI or Tailwind don't suffer from injected DOM conflicts.

Try It Out & Share Your Thoughts

Native Form is open source and ready for testing:

• Repository: https://github.com/sunilsv26/native-form

• Install:

  npm i @native-form/react
  

If you try it out, please drop a comment or open an issue on GitHub. I’d love to hear your feedback on the architecture, edge cases, or features you’d like to see next!