Skip to Content
Prism UI
Integrations

React Hook Form Adapter

usePrismForm and PrismField, the complete public API of @prismrepo/adapter-rhf.

@prismrepo/adapter-rhf is the only package that imports react-hook-form for its runtime behavior. It binds Prism's form contracts to React Hook Form using Controller-first binding, and preserves the complete UseFormReturn API.

usePrismForm

function usePrismForm<TRegistry extends FieldRegistry, TValues extends FieldValues>(
  definition: FormDefinition<TRegistry, TValues>,
  options?: UseFormProps<TValues>,
): UseFormReturn<TValues> & {
  readonly registry: TRegistry;
  readonly fieldsConfig: FormFieldsConfig<TRegistry, TValues>;
};

Builds a real React Hook Form instance from a Prism FormDefinition (produced by createFormBuilder(registry).defineForm<TValues>(...)). This is a thin wrapper, not a competing form-state implementation: it calls RHF's own useForm and returns RHF's own object, augmented with registry and fieldsConfig so <PrismField> can resolve components at render time. Neither added key collides with any real RHF key, verified by diffing the actual key sets at runtime, not just checking a handful of methods.

options is RHF's own UseFormProps<TValues>, passed straight through, defaultValues, mode, resolver, and everything else RHF accepts works exactly as documented in React Hook Form's own docs.

useForm itself is called at the top of this hook's own invocation (component-scoped, never module-level), so initialization and unmount cleanup are exactly RHF's own.

Requires react-hook-form@^7.52.0, the first version with React 19 support.

PrismField

function PrismField<
  TRegistry extends FieldRegistry,
  TValues extends FieldValues,
  TName extends FieldPath<TValues>,
>(props: {
  form: UsePrismFormReturn<TRegistry, TValues>;
  name: TName;
  rules?: RegisterOptions<TValues, TName>;
}): ReactElement;

Resolves the field's configured type against form.registry at render time and binds it through RHF's Controller, translating Controller's render props into Prism's normalized FieldBinding<TValue> contract. A field-level validation error reaches the component through that same binding, see Submission and Error Handling.

Throws PrismConfigurationError if name has no entry in form.fieldsConfig, or if its configured type isn't in form.registry, rather than silently rendering nothing.

rules passes native RHF validation rules straight through to Controller, the documented escape hatch for reaching RHF's own validation directly, alongside (not replaced by) schema-driven validation via @prismrepo/adapter-zod.

Reaching the full RHF API

Because usePrismForm returns the real, unmodified UseFormReturn, every method you already know from React Hook Form works without any Prism-specific wrapper:

const form = usePrismForm(definition, { defaultValues });

form.watch('email'); // live value
form.setValue('email', 'new@example.com'); // programmatic update
form.getValues(); // current snapshot
form.reset(); // restore defaults
form.setError('root', { message: 'Server rejected the request' });
form.control; // the real Control object, for Controller or useController directly
form.formState.isDirty;
form.formState.isSubmitting;

See Advanced Usage for using form.control directly to build fields with genuinely dynamic, per-render configuration.

On this page