@native-form/valibot

Valibot schema validation adapter for Native Form.

Microscopic footprint: Adds only 457 bytes (gzip) to your application bundle with zero runtime dependencies.

Installation

npm install @native-form/valibot valibot
# or
pnpm add @native-form/valibot valibot
# or
yarn add @native-form/valibot valibot

Usage

import { useForm } from "@native-form/react";
import { valibotResolver } from "@native-form/valibot";
import * as v from "valibot";

const loginSchema = v.object({
  email: v.pipe(v.string(), v.email("Invalid email address")),
  password: v.pipe(v.string(), v.minLength(8, "Password must be at least 8 characters")),
});

export function LoginForm() {
  const form = useForm({
    schema: valibotResolver(loginSchema),
    onSubmit: (values) => {
      console.log("Validated values:", values);
    },
  });

  return (
    <form ref={form.formRef}>
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button type="submit">Log In</button>
    </form>
  );
}

License

MIT © Sunil