Skip to content
/ conform Public
forked from edmundhung/conform

Progressive enhancement first form validation library for Remix and React Router

License

Notifications You must be signed in to change notification settings

zifahm/conform

 
 

Repository files navigation

CONFORM latest release GitHub license

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

Highlights

  • Progressive enhancement first APIs
  • Automatic type coercion with Zod
  • Simplifed integration through event delegation
  • Field name inference
  • Focus management
  • Accessibility support
  • About 5kb compressed

Quick Start

Here is an example built with Remix:

import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { Form, useActionData } from '@remix-run/react';
import { json } from '@remix-run/node';
import { z } from 'zod';
import { authenticate } from '~/auth';

const schema = z.object({
  email: z
    .string({ required_error: 'Email is required' })
    .email('Email is invalid'),
  password: z.string({ required_error: 'Password is required' }),
});

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

  if (!submission.value || submission.intent !== 'submit') {
    return json(submission);
  }

  return await authenticate(submission.value);
}

export default function LoginForm() {
  const lastSubmission = useActionData<typeof action>();
  const [form, { email, password }] = useForm({
    lastSubmission,
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
  });

  return (
    <Form method="post" {...form.props}>
      <div>
        <label>Email</label>
        <input type="email" name={email.name} />
        <div>{email.error}</div>
      </div>
      <div>
        <label>Password</label>
        <input type="password" name={password.name} />
        <div>{password.error}</div>
      </div>
      <button>Login</button>
    </Form>
  );
}

About

Progressive enhancement first form validation library for Remix and React Router

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.3%
  • Other 1.7%