Custom field renderers

Custom renderers change presentation without moving calculations, visibility, requirements, or validation out of form0-core.

Scoped overrides

Prefer FieldRegistryProvider when an application, route, test, or Storybook story needs an isolated renderer set:

Code
import { FieldRegistryProvider, FormRenderer } from "form0-react"
import { DateField } from "./date-field.jsx"

export function AppForm({ schema }) {
  return (
    <FieldRegistryProvider renderers={{ DateField }}>
      <FormRenderer schema={schema} />
    </FieldRegistryProvider>
  )
}

A renderer receives the field contract used by the defaults:

Code
function DateField({ field, value, onChange, readOnly, inputProps, className }) {
  return (
    <input
      {...inputProps}
      className={className}
      type="date"
      value={value ?? ""}
      disabled={readOnly}
      onChange={(event) => onChange(event.target.value)}
    />
  )
}

Preserve the supplied accessibility properties in inputProps.

Registry instances and global overrides

Use createFieldRegistry({ includeDefaults, renderers }) for an explicit registry instance. The module-level registerFieldComponent, unregisterFieldComponent, and resetFieldComponents helpers mutate the shared default registry and are best reserved for application bootstrap or tests.

Only field types declared by form0-core can be registered. A new schema field type must first be defined in Core; a React renderer alone cannot extend the schema contract.