Override or add field components.
The field registry maps question types (e.g. "short_text") to React components. FieldCraft ships a default registry with 36 built-in field components. You can override any of them or add new ones.
How It Works
When FormEngineRenderer renders a field, it looks up the component from the registry by the question's type. If a custom registry is provided via the components prop, it is merged with the default registry — your components take precedence.
import { FormEngineRenderer } from "@squaredr/fieldcraft-react";
import type { FieldProps } from "@squaredr/fieldcraft-react";
// Override the built-in rating field
function StarRating({ field, value, onChange }: FieldProps) {
return <div>{/* your star rating UI */}</div>;
}
<FormEngineRenderer
schema={schema}
components={{ rating: StarRating }}
onSubmit={handleSubmit}
/>
Types
import type { FieldProps, FieldComponent, FieldRegistry } from "@squaredr/fieldcraft-react";
// A field component receives these props
type FieldProps = {
field: Question; // Schema question object
value: unknown; // Current value
error?: string[]; // Error messages (or undefined)
touched: boolean; // Whether field has been interacted with
disabled: boolean; // Whether field is disabled
onChange: (value: unknown) => void; // Update the value
onBlur: () => void; // Mark as touched
theme: FormEngineTheme; // Current theme
};
// A field component type
type FieldComponent = React.ComponentType<FieldProps>;
// A registry maps question types to components
type FieldRegistry = Partial<Record<QuestionType, FieldComponent>>;
Default Registry
The built-in registry covers all 36 field types:
| Category | Types |
|---|
| Text (7) | short_text, long_text, email, phone, phone_international, url, legal_name |
| Numeric (6) | number, slider, rating, nps, likert, opinion_scale |
| Selection (6) | single_select, multi_select, dropdown, boolean, country_select, ranking |
| Date/Time (4) | date, date_range, time, appointment |
| Media (3) | file_upload, signature, image_capture |
| Advanced (7) | address, payment, matrix, repeater, calculated, hidden, scoring |
| Structural (2) | consent, info_block |
Creating a Registry
import { createFieldRegistry } from "@squaredr/fieldcraft-react";
const myRegistry = createFieldRegistry({
rating: MyStarRating,
nps: MyNpsSlider,
signature: MySignaturePad,
});
Merging Registries
Use mergeRegistries to combine multiple registries. Later registries override earlier ones:
import { mergeRegistries, defaultRegistry } from "@squaredr/fieldcraft-react";
const combined = mergeRegistries(
defaultRegistry, // Base — all 36 built-in fields
healthcareFields, // Override: PHQ-9, GAD-7, etc.
myCustomFields, // Override: anything else
);
<FormEngineRenderer
schema={schema}
components={combined}
onSubmit={handleSubmit}
/>
Importing Individual Fields
All 36 built-in field components are available as named exports:
import {
ShortTextField,
EmailField,
RatingField,
MatrixField,
SignatureField,
// ... all 36 available
} from "@squaredr/fieldcraft-react";
This is useful when composing a custom field that wraps a built-in one with additional behavior.