form0-react

Note

form0 is in active development and is available to use today. Its schema format and core concepts are stable in practice, but releases before 1.0 may include breaking changes. Pin your versions and review the release notes when upgrading. A formally stable release is coming.

form0-react is the React UI layer for the form0 ecosystem. It combines the form0-core engine with accessible default field renderers while allowing applications to replace the presentation with their own components and design system.

🚀 Start with the CLI

For a new project, install form0-cli and follow the quickstart. Choose the web application option to start from the maintained React and Vite template.

Install form0-react directly when integrating it into an existing React application.

📦 Installation

npm install form0-react form0-core

Install compatible React peer dependencies if the application does not already provide them.

⚡ Quick example

import { FormRenderer } from 'form0-react';
import 'form0-react/index.css';

const schema = {
  form: {
    name: 'Contact form',
    status_field: null,
    elements: [
      {
        type: 'TextField',
        key: 'name',
        data_name: 'name',
        label: 'Name',
        display: 'default',
        description: null,
        description_mode: null,
        required: true,
        required_conditions: null,
        visible: true,
        visible_conditions: null,
        read_only: false,
        read_only_conditions: null,
        default_value: null,
        pattern: null,
        pattern_description: null,
        supporting_image: false,
        supporting_image_path: null,
        supporting_image_display: null,
      },
    ],
  },
};

export function ContactForm() {
  return <FormRenderer schema={schema} onSubmit={(record) => console.log(record)} />;
}

Custom renderers

Applications can replace or extend field components without forking the package. Use the exported field registry APIs or a FieldRegistryProvider to keep application-specific UI outside the form engine.

FormRenderer also supports consumer-owned state and layout integration:

• headerAccessory renders application UI between the form summary and body.
• externalDirty includes application-owned changes in discard confirmation.
• submitBlockedReason prevents submission while an external condition is unresolved.
• recordMetadataFields can provide read-only display data that never enters engine values.

✅ Requirements

• Node.js 22 or newer
• React 18 or 19
• React DOM 18 or 19
• @vanilla-extract/css 1.17.4 or newer

Worker mode requires a bundler that supports ESM module workers and rewrites new Worker(new URL(..., import.meta.url), { type: 'module' }). Vite-based applications are supported. FormRenderer uses the packaged worker when engineMode="worker"; custom worker URLs and factories are not part of its public API.

📚 Documentation

• Quickstart
• Bindings overview
• Install and render with React
• FormRenderer
• Custom field renderers
• React API reference
• Web starter

🔒 Security

Schema expressions are evaluated by form0-core. Only use schemas from trusted authors and review the form0-core security policy. Report vulnerabilities according to this repository's security policy.

🤝 Support and contributing

See SUPPORT.md for help and CONTRIBUTING.md to contribute.

📄 License

MIT