Type-safe field props
A reusable input component receives a field name and should reject incompatible names at compile time.
Conform · Type Alias
FieldName
FieldName is a branded string type for Conform field names. It improves TypeScript inference and checks that names passed to reusable components match the expected field and form shapes.
How it works
FieldName is a branded string type that describes a Conform field path together with optional field, form, and error types. Using it instead of string lets TypeScript infer metadata types and detect incompatible field names, while leaving unused generic parameters optional.
Syntax
FieldName<FieldSchema, FormSchema, FormError>Parameters
| Name | Type | Description |
|---|---|---|
name | FieldName<FieldSchema, FormSchema, FormError> | The field name represented as a branded string, optionally parameterized by field schema, form schema, and form error types. |
Key points
- Replace a broad string prop with FieldName to improve type inference for field and form metadata.
- Conform-generated names already carry the relevant FieldName typing.
- Generic arguments are optional when a component does not need those type details.
Common mistakes
- Accepting string removes the compile-time compatibility checking that FieldName provides.
Example: Type a reusable field component
import type { FieldName } from '@conform-to/react';
type Props = {
name: FieldName<number>;
};
function ValueField({ name }: Props) {
return <input name={name} />;
}Use a field name supplied by Conform when rendering the reusable component.
When to use it
Nested form typing
A field belongs to a nested form and its value or top-level form shape needs explicit typing.
Partial generic specification
A component only needs the field value type and should avoid unnecessary coupling to a complete form schema.
Interview questions
QWhat problem does FieldName solve?
FieldName is a branded string type for Conform field names. It improves inference for field and form metadata and lets TypeScript warn when a supplied name is incompatible.
Follow-up: How would you preserve flexibility in a reusable component? Omit generic parameters that the component does not use, or use a less specific FieldName shape.
QWhat do FieldName's generic parameters represent?
The first generic represents the field value shape. The optional second generic describes the form shape, and the optional third represents the form error type.
Follow-up: What is an example of using the form generic? FieldName<number, { fieldName: string }> can describe access to a specific top-level field in a deeply nested form.
QHow should a component obtain a FieldName?
Use the name generated by Conform, such as fields.fieldName.name, because it is already typed as FieldName. Passing that value into a component retains compile-time compatibility checks.
Follow-up: What happens if a component accepts a plain string instead? The runtime name can still work, but TypeScript can no longer verify its compatibility.
Related
useFielduseFormuseFormMetadataFormProviderFieldSchemaFormSchemaFormError