Conform · Pipe

form.id

form.id is Conform's generated identifier for a form. Put it on the <form> element and pass it to components that need to associate themselves with that form.

How it works

form.id is the identifier generated in the metadata returned by useForm. Assigning it to the <form> element gives the form a stable identifier that Conform-related helpers and field metadata can reference, while generated field IDs support accessible label associations.

Syntax

const [form, fields] = useForm();
<form id={form.id}>

Returns

A form identifier string, exposed as form.id on the metadata returned by useForm.

Key points

form.id is the generated ID intended for the form element's id attribute.
The form metadata containing id is the same metadata object returned by useForm.
Conform-generated form references include form.id and field-level formId values with a FormId type.
Typing component inputs with FormId enables TypeScript to flag incompatible form identifiers.

Common mistakes

form.id belongs on the form element itself; do not substitute an unrelated element ID when passing the form identifier to Conform APIs.
A plain string is accepted, but using the generated form.id preserves the stronger FormId type checking available to compatible components.

Example: Use the generated form identifier

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

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

  return (
    <form id={form.id}>
      <label htmlFor={fields.email.id}>Email</label>
      <input id={fields.email.id} name={fields.email.name} />
    </form>
  );
}

Use the generated form identifier on the form element and use generated field metadata for associated controls.

When to use it

Assign the generated ID to the form element

Rendering a Conform-managed form

Connect child components to the correct form

Passing form context into reusable components

Use the generated FormId value

Maintaining type-safe form associations

Interview questions

QWhat is form.id used for?

form.id is the generated identifier for the form metadata returned by useForm. It should be assigned to the form element's id attribute so Conform can associate related metadata with that form.

Follow-up: How can a component receive this identifier safely? Pass form.id to a prop typed as FormId<Schema, FormError> when the component uses those generics; otherwise a simple string prop can be sufficient.

QWhere does form.id come from and how is it rendered?

The identifier is read from the object returned by useForm, alongside field metadata. A typical form renders it as <form id={form.id}>.

Follow-up: What is the trade-off of accepting string instead? The component becomes simpler and more reusable, but TypeScript can no longer verify that the supplied form identifier matches the expected schema and error types.

QWhy use the FormId type instead of only string?

Conform supplies identifiers such as form.id and fields.fieldName.formId with the FormId<Schema, FormError> type. Using that type lets TypeScript detect incompatible form metadata connections.

Follow-up: When should a component avoid a highly specific FormId type? If it does not use Schema or FormError generics, keeping the prop typed as string avoids unnecessary constraints on reuse.

useForm
useFormMetadata
FormId
fields.fieldName.formId
getFormProps

Source: useFormMetadata. Checked 2026-10-15.