Message

<div id={fields.message.errorId}>{fields.message.errors}</div>
      </div>
      <button>Send</button>
    </Form>
  );
}
```

--------------------------------

### Remix Login Form Example

Source: https://github.com/edmundhung/conform/blob/main/docs/integration/remix.md

Demonstrates a complete login form integration with Remix, including server-side validation using Zod and client-side validation with Conform.

```tsx
import { getFormProps, getInputProps, useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import type { ActionArgs } from '@remix-run/node';
import { json, redirect } from '@remix-run/node';
import { Form, useActionData } from '@remix-run/react';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string(),
  remember: z.boolean().optional(),
});

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

if (submission.status !== 'success') {
    return json(submission.reply());
  }

// ...
}

export default function Login() {
  // Last submission returned by the server
  const lastResult = useActionData<typeof action>();
  const [form, fields] = useForm({
    // Sync the result of last submission
    lastResult,

// Reuse the validation logic on the client
    onValidate({ formData }) {
      return parseWithZod(formData, {
        schema
      });
    },

// Validate the form on blur event triggered
    shouldValidate: 'onBlur',
    shouldRevalidate: 'onInput',
  });

return (
    <Form method="post" id={form.id} onSubmit={form.onSubmit} noValidate>
      <div>
        <label>Email</label>
        <input
          type="email"
          key={fields.email.key}
          name={fields.email.name}
          defaultValue={fields.email.initialValue}
        />
        <div>{fields.email.errors}</div>
      </div>
      <div>
        <label>Password</label>
        <input
          type="password"
          key={fields.password.key}
          name={fields.password.name}
          defaultValue={fields.password.initialValue}
        />
        <div>{fields.password.errors}</div>
      </div>
      <label>
        <div>
          <span>Remember me</span>
          <input
            type="checkbox"
            key={fields.remember.key}
            name={fields.remember.name}
            defaultChecked={fields.remember.initialValue === 'on'}
          />
        </div>
      </label>
      <hr />
      <button>Login</button>
    </Form>
  );
}

```

--------------------------------

### Manual Fieldset Props vs. Helper

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getFieldsetProps.md

This example demonstrates the 'before' and 'after' of using the getFieldsetProps helper. The 'after' version is more concise and readable by leveraging the helper function.

```tsx
// Before
function Example() {
  return (
    <fieldset
      id={fields.address.id}
      name={fields.address.name}
      form={fields.address.formId}
      aria-describedby={!form.valid ? form.errorId : undefined}
    />
  );
}

// After
function Example() {
  return <fieldset {...getFieldsetProps(fields.address)} />;
}
```

--------------------------------

### Focus Delegation Example

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/useInputControl.md

Illustrates how to handle focus delegation for custom inputs when Conform fails to focus the first invalid input element.

```APIDOC
## Tips

### Focus delegation

Conform will focus on the first invalid input element if submission failed. However, this might not work if your have a custom input. To fix this, you can forward the focus from the input element by listening to the focus event and trigger `element.focus()` on the desired element.

```tsx
import { useForm, useInputControl } from '@conform-to/react';
import { Select, Option } from './custom-ui';

function Example() {
  const [form, fields] = useForm();
  const inputRef = useRef(null);
  const color = useInputControl(fields.color);

return (
    <>
        <input
            name={fields.color.name}
            defaultValue={fields.color.initialValue}
            className="sr-only"
            tabIndex={-1}
            onFocus={() => inputRef.current?.focus()}
        />
        <Select
            ref={inputRef}
            value={color.value}
            onChange={color.change}
            onFocus={color.focus}
            onBlur={color.blur}
        >
            <Option value="red">Red</Option>
            <Option value="green">Green</Option>
            <Option value="blue">Blue</Option>
        </Select>
    <>
  );
}
```

In the example above, we set up a hidden input manually instead of passing a `name` prop to the custom select component due to no control over the inner input rendered by the custom input. The input is visually hidden but still focusable thanks to the **sr-only** class from [tailwindcss](https://tailwindcss.com/docs/screen-readers#screen-reader-only-elements). When the input is focused, we delegate the focus to the custom input by calling `inputRef.current?.focus()`.

If you are not using tailwindcss, please look for a similar utility from your preferred styling solution or you can apply the following style based on the implementation of the **sr-only** class:

```tsx
const style = {
  position: 'absolute',
  width: '1px',
  height: '1px',
  padding: 0,
  margin: '-1px',
  overflow: 'hidden',
  clip: 'rect(0,0,0,0)',
  whiteSpace: 'nowrap',
  border: 0,
};
```
```

--------------------------------

### Minimize Form Boilerplate with Conform Helpers

Source: https://github.com/edmundhung/conform/blob/main/docs/tutorial.md

Use `getFormProps`, `getInputProps`, and `getTextareaProps` to reduce boilerplate when setting up native inputs. This example shows the basic structure for integrating these helpers.

```tsx
import {
  useForm,
  getFormProps,
  getInputProps,
  getTextareaProps,
} from '@conform-to/react';
import { parseWithZod, getZodConstraint } from '@conform-to/zod';
import { type ActionFunctionArgs } from '@remix-run/node';
import { Form, useActionData } from '@remix-run/react';
import { sendMessage } from '~/message';

const schema = z.object({
  // ...
});

export async function action({ request }: ActionFunctionArgs) {
  // ...
}

export default function ContactUs() {
  const lastResult = useActionData<typeof action>();
  const [form, fields] = useForm({
    // ...
  });

return (
    <Form method="post" {...getFormProps(form)}>
      <div>
        <label htmlFor={fields.email.id}>Email</label>
        <input {...getInputProps(fields.email, { type: 'email' })} />
        <div id={fields.email.errorId}>{fields.email.errors}</div>
      </div>
      <div>
        <label htmlFor={fields.message.id}>Message</label>
        <textarea {...getTextareaProps(fields.message)} />
        <div id={fields.message.errorId}>{fields.message.errors}</div>
      </div>
      <button>Send</button>
    </Form>
  );
}
```

--------------------------------

### Compare Manual vs. Helper Input Setup

Source: https://github.com/edmundhung/conform/blob/main/docs/accessibility.md

Illustrates the reduction in boilerplate when using `getInputProps` compared to manually setting attributes for form inputs. This helper simplifies the process of managing input properties and accessibility attributes.

```tsx
import { parseWithZod, getZodConstraint } from '@conform-to/zod';
import { useForm } from '@conform-to/react';
import { z } from 'zod';

const schema = z.object({
  message:
    z.string()
      .min(10)
      .max(100)
      .regex(/^[A-Za-z0-9 ]{10-100}$/),
});

function Example() {
  const [form, fields] = useForm({
    constraint: getZodConstraint(schema),
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });

return (
    <form id={form.id}>
      {/* Before */}
      <input
        type="text"
        id={fields.message.id}
        name={fields.message.name}
        required={fields.message.required}
        minLength={fields.message.minLength}
        maxLength={fields.message.maxLength}
        pattern={fields.message.pattern}
        aria-invalid={!fields.message.valid ? true : undefined}
        aria-describedby={
          !fields.message.valid
            ? `${fields.message.errorId} ${fields.message.descriptionId}`
            : fields.message.descriptionId
        }
      />
      {/* After */}
      <input
        {...getInputProps(fields.message, {
          type: 'text',
          ariaDescribedBy: fields.message.descriptionId,
        })}
      />
      <button>Send</button>
    </form>
  );
}
```

--------------------------------

### Radio Group Setup with Conform

Source: https://github.com/edmundhung/conform/blob/main/docs/checkbox-and-radio-group.md

Use this for setting up a radio group. Ensure all inputs share the same 'name' attribute. The 'initialValue' from field metadata can determine the default checked state.

```tsx
import { useForm } from '@conform-to/react';

function Example() {
  const [form, fields] = useForm();

return (
    <form id={form.id}>
      <fieldset>
        <legend>Please select your favorite color</legend>
        {['red', 'green', 'blue'].map((value) => (
          <div key={value}>
            <label>{value}</label>
            <input
              type="radio"
              name={fields.color.name}
              value={value}
              defaultChecked={fields.color.initialValue === value}
            />
          </div>
        ))}
        <div>{fields.color.errors}</div>
      </fieldset>
      <button>Submit</button>
    </form>
  );
}
```

--------------------------------

### Setup Nested Array Fields with Conform

Source: https://github.com/edmundhung/conform/blob/main/docs/complex-structures.md

Combine `getFieldset()` and `getFieldList()` to handle deeply nested structures like arrays of objects. Field names are automatically inferred for all levels.

```tsx
import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  todos: z.array(
    z.object({
      title: z.string(),
      notes: z.string(),
    }),
  ),
});

function Example() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });
  const todos = fields.todos.getFieldList();

return (
    <form id={form.id}>
      <ul>
        {todos.map((todo) => {
          const todoFields = todo.getFieldset();

return (
            <li key={todo.key}>
              <input name={todoFields.title.name} />
              <div>{todoFields.title.errors}</div>
              <input name={todoFields.notes.name} />
              <div>{todoFields.notes.errors}</div>
            </li>
          );
        })}
      </ul>
    </form>
  );
}
```

--------------------------------

### Basic Usage of getYupConstraint

Source: https://github.com/edmundhung/conform/blob/main/docs/api/yup/getYupConstraint.md

Import `getYupConstraint` and pass your Yup schema to it to generate the constraint object for Conform's `useForm` hook. This example demonstrates defining a schema with string fields requiring a minimum and maximum length.

```tsx
import {
  getYupConstraint,
} from '@conform-to/yup';
import {
  useForm,
} from '@conform-to/react';
import * as yup from 'yup';

const schema = yup.object({
  title: yup.string().required().min(5).max(20),
  description: yup.string().optional().min(100).max(1000),
});

function Example() {
  const [form, fields] = useForm({
    constraint: getYupConstraint(schema),
  });

// ...
}
```

--------------------------------

### Single Checkbox Setup with Conform

Source: https://github.com/edmundhung/conform/blob/main/docs/checkbox-and-radio-group.md

For a single checkbox, check if the 'initialValue' matches the input 'value', which defaults to 'on' in the browser.

```tsx
import { useForm } from '@conform-to/react';

function Example() {
  const [form, fields] = useForm();

return (
    <form id={form.id}>
      <div>
        <label>Terms and conditions</label>
        <input
          name={fields.toc}
          defaultChecked={fields.toc.initialValue === 'on'}
        />
        <div>{fields.toc.errors}</div>
      </div>
      <button>Submit</button>
    </form>
  );
}
```

--------------------------------

### Setup Array Fields with Conform

Source: https://github.com/edmundhung/conform/blob/main/docs/complex-structures.md

Use `getFieldList()` to manage array fields. Field names are automatically inferred (e.g., `tasks[0]`, `tasks[1]`). This method also supports intents for modifying list items.

```tsx
import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  tasks: z.array(z.string()),
});

function Example() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });
  const tasks = fields.tasks.getFieldList();

return (
    <form id={form.id}>
      <ul>
        {tasks.map((task) => (
          <li key={task.key}>
            {/* Set the name to `task[0]`, `tasks[1]` etc */}
            <input name={task.name} />
            <div>{task.errors}</div>
          </li>
        ))}
      </ul>
    </form>
  );
}
```

--------------------------------

### Checkbox Group Setup with Conform

Source: https://github.com/edmundhung/conform/blob/main/docs/checkbox-and-radio-group.md

This snippet demonstrates setting up a checkbox group. The 'initialValue' can be a string or an array. Errors for individual options are mapped to their index (e.g., 'answer[0]'). Use 'allErrors' to display all errors for the field.

```tsx
import { useForm } from '@conform-to/react';

function Example() {
  const [form, fields] = useForm();

return (
    <form id={form.id}>
      <fieldset>
        <legend>Please select the correct answers</legend>
        {['a', 'b', 'c', 'd'].map((value) => (
          <div key={value}>
            <label>{value}</label>
            <input
              type="checkbox"
              name={fields.answer.name}
              value={value}
              defaultChecked={
                fields.answer.initialValue &&
                Array.isArray(fields.answer.initialValue)
                  ? fields.answer.initialValue.includes(value)
                  : fields.answer.initialValue === value
              }
            />
          </div>
        ))}
        <div>{Object.values(fields.answer.allErrors).flat()}</div>
      </fieldset>
      <button>Submit</button>
    </form>
  );
}
```

--------------------------------

### Nested FormProvider Example

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/FormProvider.md

Illustrates how FormProvider can be nested to manage multiple forms within each other. useField will automatically look for the closest FormContext if no formId is provided.

```tsx
import { FormProvider, useForm } from '@conform-to/react';

function Field({ name, formId }) {
  //  useField will look for the closest FormContext if no formId is provided
  const [meta] = useField(name, { formId });

return <input name={meta.name} form={meta.form} />;
}

function Parent() {
  const [form, fields] = useForm({ id: 'parent' });
  return (
    <FormProvider context={form.context}>
      <form id={form.id} />

<Field name={fields.category.name} />
      <Child />
    </FormProvider>
  );
}

function Child() {
  const [form, fields] = useForm({ id: 'child' });

return (
    <FormProvider context={form.context}>
      <form id={form.id} />
      <Field name={fields.title.name} />

{/* This will look for the form context with the id 'parent' instead */}
      <Field name={fields.bar.name} formId="parent" />
    </FormProvider>
  );
}
```

--------------------------------

### Directly Using Field Metadata for Select Props

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getSelectProps.md

This example shows how to manually set the props for a select element using field metadata, illustrating the boilerplate `getSelectProps` helps to reduce.

```tsx
// Before
function Example() {
  return (
    <form>
      <select
        key={fields.category.key}
        id={fields.category.id}
        name={fields.category.name}
        form={fields.category.formId}
        defaultValue={fields.category.initialValue}
        aria-invalid={!fields.category.valid || undefined}
        aria-describedby={
          !fields.category.valid ? fields.category.errorId : undefined
        }
        required={fields.category.required}
        multiple={fields.category.multiple}
      />
    </form>
  );
}

// After
function Example() {
  return (
    <form>
      <select {...getSelectProps(fields.category)} />
    </form>
  );
}
```

--------------------------------

### Using Custom Metadata with Headless UI ListBox

Source: https://github.com/edmundhung/conform/blob/main/examples/headless-ui/README.md

Apply the custom metadata defined via `configureForms` to Headless UI components for a cleaner, type-safe integration. This approach leverages the extended props for a more declarative setup.

```tsx
import {
  ExampleListBox,
  colorOptions,
} from "./src/App";
import { useForm } from "./src/forms";

const { fields } = useForm();

<ExampleListBox {...fields.colors.listBoxProps} options={colorOptions} />
```

--------------------------------

### Valibot Schema with Custom Messages

Source: https://github.com/edmundhung/conform/blob/main/docs/api/valibot/conformValibotMessage.md

This example demonstrates how to create Valibot schemas for both server and client actions using `conformValibotMessage`. It shows how to conditionally skip validation or fallback to server validation based on the intent and specific field requirements.

```tsx
import type { Intent } from '@conform-to/react';
import { useForm } from '@conform-to/react';
import { parseWithValibot, conformValibotMessage } from '@conform-to/valibot';
import {
  check,
  forward,
  forwardAsync,
  object,
  partialCheck,
  partialCheckAsync,
  pipe,
  pipeAsync,
  string,
} from 'valibot';

function createBaseSchema(intent: Intent | null) {
  return object({
    email: pipe(
      string('Email is required'),
      // When not validating email, leave the email error as it is.
      check(
        () =>
          intent === null ||
          (intent.type === 'validate' && intent.payload.name === 'email'),
        conformValibotMessage.VALIDATION_SKIPPED,
      ),
    ),
    password: string('Password is required'),
  });
}

function createServerSchema(
  intent: Intent | null,
  options: { isEmailUnique: (email: string) => Promise<boolean> },
) {
  return pipeAsync(
    createBaseSchema(intent),
    forwardAsync(
      partialCheckAsync(
        [['email']],
        async ({ email }) => options.isEmailUnique(email),
        'Email is already used',
      ),
      ['email'],
    ),
  );
}

function createClientSchema(intent: Intent | null) {
  return pipe(
    createBaseSchema(intent),
    forward(
      // If email is specified, fallback to server validation to check its uniqueness.
      partialCheck(
        [['email']],
        () => false,
        conformValibotMessage.VALIDATION_UNDEFINED,
      ),
      ['email'],
    ),
  );
}

export async function action({ request }) {
  const formData = await request.formData();
  const submission = await parseWithValibot(formData, {
    schema: (intent) =>
      createServerSchema(intent, {
        isEmailUnique: async (email) => {
          // Query your database to check if the email is unique
        },
      }),
  });

// Send the submission back to the client if the status is not successful
  if (submission.status !== 'success') {
    return submission.reply();
  }

// ...
}

function ExampleForm() {
  const [form, { email, password }] = useForm({
    onValidate({ formData }) {
      return parseWithValibot(formData, {
        schema: (intent) => createClientSchema(intent),
      });
    },
  });

// ...
}

```

--------------------------------

### Client-Server Form Validation with Conform and Zod

Source: https://github.com/edmundhung/conform/blob/main/docs/overview.md

This example demonstrates a full client-server form validation flow using Conform and Zod. It includes a server action handler for processing form data and a client component for rendering the form and handling user input. Configure validation timing with `shouldValidate` and provide server-side results via `lastResult`.

```tsx
import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';
import { login } from './your-auth-library';
import { useActionResult, redirect } from './your-server-framework';

// Define a schema for your form
const schema = z.object({
  username: z.string(),
  password: z.string(),
});

// Optional: Server action handler
export async function action({ request }) {
  const formData = await request.formData();
  const submission = parseWithZod(formData, {
    schema
  });

// Send the submission back to the client if the status is not successful
  if (submission.status !== 'success') {
    return submission.reply();
  }

const session = await login(submission.value);

// Send the submission with addional error message if login fails
  if (!session) {
    return submission.reply({
      formErrors: ['Incorrect username or password'],
    });
  }

return redirect('/dashboard');
}

// Client form component
export default function LoginForm() {
  // Grab the last submission result if you have defined a server action handler
  // This could be `useActionData()` or `useFormState()` depending on the framework
  const lastResult = useActionResult();
  const [form, fields] = useForm({
    // Configure when each field should be validated
    shouldValidate: 'onBlur',
    // Optional: Required only if you're validating on the server
    lastResult,
    // Optional: Client validation. Fallback to server validation if not provided
    onValidate({
      formData
    }) {
      return parseWithZod(formData, {
        schema
      });
    },
  });

return (
    <form method="post" id={form.id} onSubmit={form.onSubmit}>
      <div>{form.errors}</div>
      <div>
        <label>Username</label>
        <input type="text" name={fields.username.name} />
        <div>{fields.username.errors}</div>
      </div>
      <div>
        <label>Password</label>
        <input type="password" name={fields.password.name} />
        <div>{fields.password.errors}</div>
      </div>
      <button>Login</button>
    </form>
  );
}

```

--------------------------------

### Get Yup constraint

Source: https://github.com/edmundhung/conform/blob/main/docs/upgrading-v1.md

Use 'getYupConstraint' to get schema constraints from Yup schemas. This replaces 'getFieldsetConstraint'.

```typescript
// getFieldsetConstraint -> getYupConstraint
```

--------------------------------

### Get Zod constraint

Source: https://github.com/edmundhung/conform/blob/main/docs/upgrading-v1.md

Use 'getZodConstraint' to get schema constraints from Zod schemas. This replaces 'getFieldsetConstraint'.

```typescript
// getFieldsetConstraint -> getZodConstraint
```

--------------------------------

### Get Input Props

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getInputProps.md

A basic usage of getInputProps to retrieve accessibility props for an input field.

```tsx
const props = getInputProps(meta, options);
```

--------------------------------

### Custom Helper Creation

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getInputProps.md

Guidance on creating custom helper functions for non-native input components.

```APIDOC
### Make your own helper

The helper is designed for the native input elements. If you need to use a custom component, you can always make your own helpers.
```

--------------------------------

### Basic Usage of getSelectProps

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getSelectProps.md

Import `getSelectProps` from `@conform-to/react` and use it with your field metadata to get the necessary props for a select element.

```tsx
import { useForm, getSelectProps } from '@conform-to/react';

function Example() {
  const [form, fields] = useForm();

return <select {...getSelectProps(fields.category)} />;
}
```

--------------------------------

### useForm Tips

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/useForm.md

Additional usage tips and best practices for the useForm hook.

```APIDOC
## Tips

### Client validation is optional

Conform supports live validation (i.e. validate when the user leaves the input or types) without client validation. This is useful to avoid shipping the validation code in the client bundle. But please keep in mind network latency and how frequently your users might hit the server especially if you are revalidating every time they type.

### Automatic form reset when `id` is changed

You can pass a different `id` to the `useForm` hook to reset the form. This is useful when you are navigating to another page with the same form. (e.g. `/articles/foo` -> `/articles/bar`)

```tsx
interface Article {
  id: string;
  title: string;
  content: string;
}

function EditArticleForm({ defaultValue }: { defaultValue: Article }) {
  const [form, fields] = useForm({
    id: `article-${defaultValue.id}`,
    defaultValue,
  });

// ...
}
```
```

--------------------------------

### Get Fieldset Props

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getFieldsetProps.md

Use getFieldsetProps to retrieve all necessary props for an accessible fieldset element. This is a convenience function to reduce boilerplate.

```tsx
const props = getFieldsetProps(meta, options);
```

--------------------------------

### Get Textarea Props

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getTextareaProps.md

This is the basic usage of the getTextareaProps helper function. It takes field metadata and returns the necessary props for an accessible textarea element.

```tsx
const props = getTextareaProps(meta, options);
```

--------------------------------

### useFormMetadata Hook Usage

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/useFormMetadata.md

This snippet demonstrates the basic usage of the useFormMetadata hook in a React component. It shows how to import the hook and call it with a formId to get the form metadata.

```APIDOC
## useFormMetadata Hook

A React hook that returns the form metadata by subscribing to the context set on the [FormProvider](./FormProvider.md).

```tsx
const form = useFormMetadata(formId);
```

### Parameters

#### `formId`

The id attribute that is set on the form element.

### Returns

#### `form`

The form metadata. It is the same object as the one returned by the [useForm](./useForm.md) hook.
```

--------------------------------

### Using Zod v4

Source: https://github.com/edmundhung/conform/blob/main/docs/api/zod/parseWithZod.md

Instructions on how to import parseWithZod when using Zod version 4 or later.

```APIDOC
### Using Zod v4

If you are using Zod v4, make sure to import from `@conform-to/zod/v4` instead of `@conform-to/zod`:

```tsx
import { parseWithZod } from '@conform-to/zod/v4';
import { z } from 'zod'; // or 'zod/mini'
```

Using the wrong import will result in an error like `Export named 'ZodEffects' not found in module`.
```

--------------------------------

### Manipulating Field Lists with Intent Buttons

Source: https://github.com/edmundhung/conform/blob/main/docs/intent-button.md

Demonstrates how to use `insert`, `remove`, and `reorder` intents from Conform to manage an array of tasks. This is useful for dynamic lists where users can add, delete, or reorder items.

```tsx
import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';

const todosSchema = z.object({
  title: z.string(),
  tasks: z.array(z.string()),
});

export default function Tasks() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: todosSchema });
    },
    shouldValidate: 'onBlur',
  });
  const tasks = fields.tasks.getFieldList();

return (
    <form id={form.id} onSubmit={form.onSubmit}>
      <ul>
        {tasks.map((task, index) => (
          <li key={task.key}>
            <input name={task.name} />
            <button
              {...form.reorder.getButtonProps({
                name: fields.tasks.name,
                from: index,
                to: 0,
              })}
            >
              Move to top
            </button>
            <button
              {...form.remove.getButtonProps({
                name: fields.tasks.name,
                index,
              })}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
      <button
        {...form.insert.getButtonProps({
          name: fields.tasks.name,
        })}
      >
        Add task
      </button>
      <button>Save</button>
    </form>
  );
}
```

--------------------------------

### Spread accessible props onto <textarea> with getTextareaProps

Source: https://context7.com/edmundhung/conform/llms.txt

Utilize `getTextareaProps` to bind accessibility attributes to textarea elements. This requires validation setup using `useForm` and `parseWithZod`.

```tsx
import { useForm, getTextareaProps } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  message: z.string().min(10, 'Too short').max(500, 'Too long'),
});

function ContactForm() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });

return (
    <form id={form.id}>
      <textarea {...getTextareaProps(fields.message)} rows={6} />
      {fields.message.errors && <p>{fields.message.errors}</p>}
      <button>Send</button>
    </form>
  );
}
```

--------------------------------

### Custom Metadata Configuration with Conform

Source: https://github.com/edmundhung/conform/blob/main/examples/radix-ui/README.md

Configure custom metadata using `configureForms` to create reusable component prop mappings. This reduces repetition and enhances type safety in production applications.

```tsx
import { configureForms } from '@conform-to/react/future';

export const useForm = result.useForm;
```

--------------------------------

### Valibot Schema with coerceFormValue Example

Source: https://github.com/edmundhung/conform/blob/main/docs/api/valibot/coerceFormValue.md

Demonstrates how to integrate `coerceFormValue` with `useForm` and `parseWithValibot` for form validation and data handling. Ensure `disableAutoCoercion` is set to `true` when using `parseWithValibot` with `coerceFormValue`.

```typescript
import { useForm } from '@conform-to/react';
import {
  parseWithValibot,
  unstable_coerceFormValue as coerceFormValue,
} from '@conform-to/valibot';
import * as v from 'valibot';

const schema = coerceFormValue(
  v.object({
    ref: v.string(),
    date: v.date(),
    amount: v.number(),
    confirm: v.boolean(),
  }),
);

function Example() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithValibot(formData, {
        schema,
        disableAutoCoercion: true,
      });
    },
  });

// ...
}
```

--------------------------------

### Custom Metadata Configuration with Conform

Source: https://github.com/edmundhung/conform/blob/main/examples/chakra-ui/README.md

Configure custom metadata using `configureForms` for a DRYer approach in production applications. This allows for reusable component prop configurations.

```tsx
import { configureForms } from '@conform-to/react/future';

export const useForm = result.useForm;
```

--------------------------------

### Parse FormData with Multiple Error Messages

Source: https://github.com/edmundhung/conform/blob/main/docs/api/validitystate.md

This example demonstrates how to configure the `formatError` function to return an array of error messages for a given input, allowing for multiple validation failures to be reported.

```typescript
function formatError({ input }: FormatErrorArgs) {
  const error = [];

switch (input.name) {
    case 'email': {
      if (input.validity.valueMissing) {
        error.push('Email is required');
      }
      if (input.validity.typeMismatch) {
        error.push('Email is invalid');
      }
      break;
    }
    case 'password': {
      if (input.validity.valueMissing) {
        error.push('Password is required');
      }
      if (input.validity.tooShort) {
        error.push('Password is too short');
      }
      break;
    }
  }

return error;
}
```

--------------------------------

### Example Usage of coerceFormValue

Source: https://github.com/edmundhung/conform/blob/main/docs/api/zod/coerceFormValue.md

Demonstrates how to integrate `coerceFormValue` within a Conform form's validation process. Note the `disableAutoCoercion: true` option when using `parseWithZod` to prevent double coercion.

```typescript
import { useForm } from '@conform-to/react';
import {
  parseWithZod,
  unstable_coerceFormValue as coerceFormValue,
} from '@conform-to/zod';
// If you are using Zod v4, update the imports:
// import { parseWithZod, unstable_coerceFormValue as coerceFormValue } from '@conform-to/zod/v4';
import { z } from 'zod';

const schema = coerceFormValue(
  z.object({
    ref: z.string(),
    date: z.date(),
    amount: z.number(),
    confirm: z.boolean(),
  }),
);

function Example() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, {
        schema,
        disableAutoCoercion: true,
      });
    },
  });

// ...
}
```

--------------------------------

### Basic parseWithYup Usage

Source: https://github.com/edmundhung/conform/blob/main/docs/api/yup/parseWithYup.md

Demonstrates the basic usage of parseWithYup with a payload and options object.

```tsx
const submission = parseWithYup(payload, options);
```

--------------------------------

### Handling Single File Uploads with Conform

Source: https://context7.com/edmundhung/conform/llms.txt

Configure forms for single file uploads by setting `encType="multipart/form-data"` and `method="POST"`. Use `z.instanceof(File)` for validation and ensure the input name matches the schema field.

```tsx
import { useForm, getInputProps } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';

const singleFileSchema = z.object({
  avatar:
    z
      .instanceof(File, { message: 'Avatar is required' })
      .refine((f) => f.size < 2 * 1024 * 1024, 'Max 2 MB'),
});

function UploadForm() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: singleFileSchema });
    },
  });

return (
    <form method="POST" encType="multipart/form-data" id={form.id}>
      <input type="file" name={fields.avatar.name} accept="image/*" />
      <p>{fields.avatar.errors}</p>
      <button>Upload avatar</button>
    </form>
  );
}

```

--------------------------------

### Integrating parseWithYup with Conform and Yup

Source: https://github.com/edmundhung/conform/blob/main/docs/api/yup/parseWithYup.md

Shows how to integrate parseWithYup within a Conform form's onValidate handler, using a Yup schema for validation. Ensure Yup and Conform are installed and imported.

```tsx
import { parseWithYup } from '@conform-to/yup';
import { useForm } from '@conform-to/react';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email(),
  password: yup.string(),
});

function Example() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithYup(formData, { schema });
    },
  });

// ...
}
```

--------------------------------

### Manual Input Prop Assignment (Before)

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getInputProps.md

Illustrates the manual assignment of accessibility and input-specific props for text and checkbox inputs before using the getInputProps helper.

```tsx
// Before
function Example() {
  return (
    <form>
      {/* text input */}
      <input
        key={fields.task.key}
        id={fields.task.id}
        name={fields.task.name}
        form={fields.task.formId}
        defaultValue={fields.task.initialValue}
        aria-invalid={!fields.task.valid || undefined}
        aria-describedby={!fields.task.valid ? fields.task.errorId : undefined}
        required={fields.task.required}
        minLength={fields.task.minLength}
        maxLength={fields.task.maxLength}
        min={fields.task.min}
        max={fields.task.max}
        step={fields.task.step}
        pattern={fields.task.pattern}
        multiple={fields.task.multiple}
      />
      {/* checkbox */}
      <input
        type="checkbox"
        key={fields.completed.key}
        id={fields.completed.id}
        name={fields.completed.name}
        form={fields.completed.formId}
        value="yes"
        defaultChecked={fields.completed.initialValue === 'yes'}
        aria-invalid={!fields.completed.valid || undefined}
        aria-describedby={
          !fields.completed.valid ? fields.completed.errorId : undefined
        }
        required={fields.completed.required}
      />
    </form>
  );
}
```

--------------------------------

### Parse FormData with Yup schema and get constraints

Source: https://context7.com/edmundhung/conform/llms.txt

Utilize `parseWithYup` and `getYupConstraint` to integrate Yup schemas with Conform for form validation. This allows for defining validation rules in Yup and applying them to your forms.

```tsx
import { parseWithYup } from '@conform-to/yup';
import { getYupConstraint } from '@conform-to/yup';
import { useForm, getInputProps } from '@conform-to/react';
import * as yup from 'yup';

const schema = yup.object({
  name:  yup.string().required('Name is required').min(2).max(50),
  email: yup.string().required('Email is required').email('Invalid email'),
  age:   yup.number().required().min(18).max(120),
});

function YupForm() {
  const [form, fields] = useForm({
    constraint: getYupConstraint(schema),
    onValidate({ formData }) {
      return parseWithYup(formData, { schema });
    },
    shouldValidate: 'onBlur',
  });

return (
    <form id={form.id}>
      <input {...getInputProps(fields.name,  { type: 'text' })} placeholder="Name" />
      <p>{fields.name.errors}</p>

<input {...getInputProps(fields.email, { type: 'email' })} placeholder="Email" />
      <p>{fields.email.errors}</p>

<input {...getInputProps(fields.age,   { type: 'number' })} placeholder="Age" />
      <p>{fields.age.errors}</p>

<button>Submit</button>
    </form>
  );
}

```

--------------------------------

### Text Input and Checkbox with getInputProps

Source: https://github.com/edmundhung/conform/blob/main/docs/api/react/getInputProps.md

Demonstrates the 'After' refactoring using getInputProps for both text and checkbox inputs, reducing boilerplate compared to manual prop assignment.

```tsx
function Example() {
  return (
    <form>
      {/* text input */}
      <input {...getInputProps(fields.task, { type: 'text' })} />
      {/* checkbox */}
      <input
        {...getInputProps(fields.completed, {
          type: 'checkbox',
          value: 'yes',
        })}
      />
    </form>
  );
}
```

--------------------------------

### Customizing Default Error Formatting

Source: https://github.com/edmundhung/conform/blob/main/docs/api/validitystate.md

This example shows how to extend the `defaultFormatError` function to add custom validation logic, such as checking if a password and confirmation password match, in addition to the default error reporting.

```typescript
import { type FormConstraints, type FormatErrorArgs, defaultFormatError } from '@conform-to/validitystate';

const constraints = {
    email: { type: 'email', required: true },
    password: { type: 'password', required: true },
    confirmPassowrd: { type: 'password', required: true },
} satisify FormConstraints;

function formatError({ input }: FormatErrorArgs<typeof constraints>) {
    const error = defaultFormatError({ input });

if (input.name === 'confirmPassword' && error.length === 0 && value.password !== value.confirmPassword) {
        error.push('notmatch');
    }

return error;
}

const submission = parse(formData, {
    constraints,
    formatError,
});
```