The full-stack form library
for React Router v7

import { z } from 'zod'
import { applySchema } from 'composable-functions'
import { formAction, SchemaForm } from 'remix-forms'

const schema = z.object({
  firstName: z.string().min(1),
  email: z.string().min(1).email(),
  howDidYouFindUs: z.enum(['aFriend', 'google']),
})

const mutation = applySchema(schema)(async (values) => values)

export const action = async ({ request }: Route.ActionArgs) =>
  formAction({
    request,
    schema,
    mutation,
    successPath: '/success',
  })

export default () => <SchemaForm schema={schema} />

This tiny code creates the form below 👇🏽

E2E type-safe, with client + server validations, a11y, pending UI, and focus management

(Go ahead, try it with JS disabled as well 😉)

100% customizable UI

Customize everything without losing our accessible defaults.

Single source of truth

Write your schema once and derive everything else from it.

Bulletproof DX

End-to-end typed to your schema. Goodbye typos, hello autocomplete!

Server-side wiring

Perform secure server-side mutations with zero boilerplate.

Full-stack validation

Validate everything both on the client and the server.

Focus management

Focus on the first field with error even for server-side failures.