@formhaus/react

Renders a JSON form definition in React: multi-step, conditional and branching forms on top of @formhaus/core. Native HTML inputs by default. Part of Formhaus.

Install

npm install @formhaus/core @formhaus/react

Requires React 18 or 19 and Node 22.12 or later.

Usage

import { FormRenderer } from '@formhaus/react';
import definition from './contact-form.json';

export function ContactPage() {
  async function handleSubmit(values: Record<string, unknown>) {
    await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(values),
    });
  }

  return <FormRenderer definition={definition} onSubmit={handleSubmit} />;
}

Features

• Built-in field types, sections, repeatable groups and conditional visibility. See fields.
• Multi-step forms with lifecycle hooks, radio autoAdvance, async step validation and branching routes.
• Custom components through the components prop (FieldComponentMap), plus HeadlessFormRenderer to keep the built-in fields out of your bundle. Integrations: MUI, shadcn/ui.
• Dynamic select options with optionsFrom and optionsProviders. See fields.
• Form events through onFormEvent, for analytics.
• Translations: the locale prop.
• Server-side validation of the same definition with @formhaus/core/server.
• Formhaus Cloud: FormhausForm from @formhaus/react/cloud renders a published form and submits to the hosted endpoint, with file uploads and the bot check.
• Theming: import '@formhaus/core/style.css', then override the --fh-* custom properties.
• Server-side rendering with Next.js.

Formhaus Cloud

import { FormhausForm } from '@formhaus/react/cloud';

<FormhausForm id="form_id" />

Network

Only @formhaus/react/cloud makes network requests.

• It calls https://api.formhaus.cc, or the apiBase you pass, and loads a challenge frame from https://formhaus.cc.
• @formhaus/react makes no network requests.

Docs

• Guide, API reference and recipes
• Framework overview and playground
• Source and issues

License

MIT