Conform

Progressive enhancement first form validation library for Remix and React R...

FormValidationReact
edmundhung/conformconform.guide@conform-to/react

README

CONFORM


A progressive enhancement first form validation library for Remix and React Router

Highlights


- Focused on progressive enhancement by default
- Simplifed integration through event delegation
- Server first validation with Zod / Yup schema support
- Field name inference with type checking
- Focus management
- Accessibility support
- About 5kb compressed

Quick Start


Here is an example built with Remix:

  1. ```tsx
  2. import { useForm } from '@conform-to/react';
  3. import { parse } from '@conform-to/zod';
  4. import { Form } from '@remix-run/react';
  5. import { json } from '@remix-run/node';
  6. import { z } from 'zod';
  7. import { authenticate } from '~/auth';

  9. const schema = z.object({
  10.   email: z.string().min(1, 'Email is required').email('Email is invalid'),
  11.   password: z.string().min(1, 'Password is required'),
  12. });

  14. export async function action({ request }: ActionArgs) {
  15.   const formData = await request.formData();
  16.   const submission = parse(formData, { schema });

  18.   if (!submission.value || submission.intent !== 'submit') {
  19.     return json(submission, { status: 400 });
  20.   }

  22.   return await authenticate(submission.value);
  23. }

  25. export default function LoginForm() {
  26.   const lastSubmission = useActionData<typeof action>();
  27.   const [form, { email, password }] = useForm({
  28.     lastSubmission,
  29.     onValidate({ formData }) {
  30.       return parse(formData, { schema });
  31.     },
  32.   });

  34.   return (
  35.     <Form method="post" {...form.props}>
  36.       <div>
  37.         <label>Email</label>
  38.         <input type="email" name={email.name} />
  39.         <div>{email.error}</div>
  40.       </div>
  41.       <div>
  42.         <label>Password</label>
  43.         <input type="password" name={password.name} />
  44.         <div>{password.error}</div>
  45.       </div>
  46.       <button>Login</button>
  47.     </Form>
  48.   );
  49. }
  50. ```