Form

Installation

Usage

The usage consists of the following steps:

1. Define Zod schema for form validation
2. Use the hook provided by Pure UI or Conform
3. Use component
4. Utilize components or manually handle form fields
5. Use Conform’s in the server action

useForm

The hook is a React hook that integrates Zod schema validation with form handling using the Conform library.

It’s designed for use with RSC, specifically leveraging . It accepts a Zod schema, an optional submission result, and an action. The hook ensures validation happens on blur and revalidation occurs on input, preventing the default form reset behavior while keeping the last submission result in sync.

Essentially, it's a wrapper around the Conform hook, which removes some boilerplate and provides a more convenient API and sensible defaults. You can use Conform hook instead if you prefer.

The hook returns a tuple containing and metadata that you can use to enhance a HTML form by using and components with the provided metadata.

Form

Uses Conform’s and sets all props required to make a form element accessible. To function properly, pass the metadata returned by hook as the prop.

Form Fields

To enhance the developer experience, additional form field components are provided that wrap inputs, adding styling, error messages, labels, and Conform’s meta binding.

To ensure proper functionality, pass the appropriate field from the metadata returned by the hook as the prop.

Checkbox Field

Input Field

Textarea Field

Radio Group Field

Select Field

Switch Field

Custom Field

You’re not limited to using only components. If you need more control over component rendering, you can use any input component with validation:

Native Inputs

You can even use native HTML inputs:

Conform Wrappers

If you don’t need , , or error messages, you can use form inputs wrapped with Conform directly.

CheckboxConform

InputConform

RadioGroupConform

SelectConform

SwitchConform

TextareaConform

API Reference

Form

FormFieldSet

FormField

FormFieldMessages