@factorialco/rjsf-f0

The f0 theme for react-jsonschema-form. It renders an RJSF form with real f0 components — inputs, selects, checkboxes, buttons — instead of styling plain HTML to look like f0.

Use it inside an app that already runs f0 (the Factorial Code dashboard, the Factorial monolith). Apps that embed a form on an arbitrary page should keep the Forms SDK's own theme, which needs no design system: f0 cannot be tree-shaken, so pulling it in costs megabytes.

Install

pnpm add @factorialco/rjsf-f0

Peers you must already have: react, react-dom, @rjsf/core 6, @rjsf/utils 6 and @factorialco/f0-react 4.39+ or 6.

Usage

With the Factorial Code Forms SDK — it keeps fetching the form spec and submitting, and only the rendering changes:

import FcodeForm from '@factorialco/fcode-react-forms';
import { Theme } from '@factorialco/rjsf-f0';
import '@factorialco/rjsf-f0/styles.css';

<FcodeForm
  team="my-team"
  processId="my-process"
  rjsfTheme={Theme}
  // Suppresses the SDK's standalone stylesheet, which resets inherited styles
  // and would fight the host app's own.
  options={{ theme: 'none', locale: 'en' }}
/>;

Standalone, as any RJSF theme:

import Form from '@factorialco/rjsf-f0';
import validator from '@rjsf/validator-ajv8';
import '@factorialco/rjsf-f0/styles.css';

<Form schema={schema} validator={validator} />;

Also exported: Theme, Templates, Widgets, generateTheme() and generateForm(), matching the layout of the official @rjsf/* theme packages.

The host app must render f0's F0Provider above the form and import @factorialco/f0-react/dist/styles.css; this package assumes both and only ships the layout rules for the parts RJSF composes.

How the mapping works

| RJSF | f0 | | --- | --- | | text / email / url / password | F0FormField text | | number / integer / updown / range | F0FormField number | | date / datetime-local / time | F0FormField date / datetime / time | | textarea | F0FormField textarea | | enum select, multi-select | F0FormField select | | boolean checkbox, checkboxes | F0Checkbox | | radio | F0FormField cardSelect (f0 has no radio control) | | submit, add/move/copy/remove | F0Button | | error summary | F0Alert | | section title | F0Heading |

Two deliberate consequences of that mapping:

• RJSF keeps ownership of validation. f0 fields normally validate with zod; here they are told about errors (error, errorMessage) rather than deriving them, so the schema stays the single source of truth.
• Labels are rendered by the theme, not by f0. Factorial Code form labels may contain markdown, which f0 takes as a plain string. The theme renders the markdown label itself and hands f0 the plain text so the control keeps an accessible name.

Not yet f0

• File fields keep a native <input type="file"> (rendered by the theme's BaseInputTemplate, since core's FileWidget delegates its input to it). The SDK exchanges uploads as data: URLs, while f0's file field is built around an upload hook — bridging the two is not done yet.
• range renders as a number input rather than F0Slider.
• The Forms SDK's sourceCode field keeps its Monaco editor, which is not f0-styled.

Development

pnpm test      # vitest: renders forms through the theme and checks value round-trips
pnpm dev       # vite playground with every widget
pnpm build     # tsc + vitest + vite (es + cjs + types + styles.css)