React Components

All exported components from @squaredr/fieldcraft-react.

The React package exports high-level form components, layout helpers, and all 36 individual field components.

FormEngineRenderer

The primary drop-in component. See the dedicated page for full props.

import { FormEngineRenderer } from "@squaredr/fieldcraft-react";

<FormEngineRenderer
  schema={schema}
  theme={darkPreset}
  onSubmit={(response) => console.log(response)}
/>

FormEngineThemeProvider

Applies a theme via CSS custom properties. Required when building a custom UI with hooks.

import { FormEngineThemeProvider } from "@squaredr/fieldcraft-react";

<FormEngineThemeProvider theme={darkPreset}>
  {children}
</FormEngineThemeProvider>

Prop	Type	Description
`theme`	`FormEngineTheme`	Theme object (defaults to `cleanPreset`)
`children`	`React.ReactNode`	Form content

SectionRenderer

Renders a single section and its visible fields.

import { SectionRenderer } from "@squaredr/fieldcraft-react";

<SectionRenderer
  section={section}
  engine={engine}
  theme={theme}
  registry={registry}
/>

Prop	Type	Description
`section`	`Section`	Section object from schema
`engine`	`FormEngine`	Engine instance
`theme`	`FormEngineTheme`	Current theme
`registry`	`FieldRegistry`	Field component registry

Supports three layout variants via theme.layout.sectionLayout: "card", "bordered", and "flat".

FieldRenderer

Renders a single field by looking up its component from the registry.

import { FieldRenderer } from "@squaredr/fieldcraft-react";

<FieldRenderer
  field={question}
  value={state.values[question.id]}
  error={state.errors[question.id]}
  touched={state.touched[question.id] ?? false}
  disabled={false}
  onChange={(v) => engine.setValue(question.id, v)}
  onBlur={() => engine.touchField(question.id)}
  theme={theme}
  registry={registry}
/>

Handles width mapping from field.layout.width: "half" → 50%, "third" → 33%, default → 100%.

ProgressBar

Renders a progress indicator based on the schema's progressStyle setting.

import { ProgressBar } from "@squaredr/fieldcraft-react";

<ProgressBar
  progressPercent={66}
  currentSectionIndex={1}
  totalVisibleSections={3}
  style="steps"  // "bar" | "steps" | "percentage"
/>

NavigationButtons

Renders Back / Next / Submit buttons with state-driven enable/disable.

import { NavigationButtons } from "@squaredr/fieldcraft-react";

<NavigationButtons
  canGoPrev={true}
  canGoNext={true}
  isLastSection={false}
  isSubmitting={false}
  onPrev={() => engine.prevSection()}
  onNext={() => engine.nextSection()}
  onSubmit={() => engine.submit()}
  prevLabel="Back"
  nextLabel="Next"
  submitLabel="Submit"
/>

SectionNavigation

Renders a clickable section list / sidebar for wizard navigation.

import { SectionNavigation } from "@squaredr/fieldcraft-react";

<SectionNavigation
  sections={engine.getVisibleSections()}
  currentSectionId={state.currentSectionId}
  visitedSectionIds={state.visitedSectionIds}
  onJump={(sectionId) => engine.jumpTo(sectionId)}
/>

ErrorSummary

Displays a summary of all validation errors after a submit attempt.

import { ErrorSummary } from "@squaredr/fieldcraft-react";

<ErrorSummary errors={state.errors} />

DraftResumePrompt

Shows a prompt to resume or discard a saved draft.

import { DraftResumePrompt } from "@squaredr/fieldcraft-react";

<DraftResumePrompt
  onResume={() => { /* keep draft values */ }}
  onDiscard={() => engine.clearDraft()}
/>

CompletionScreen

Shown after successful form submission.

import { CompletionScreen } from "@squaredr/fieldcraft-react";

<CompletionScreen
  message="Thank you for your submission!"
  showSummary={true}
  values={state.values}
  schema={schema}
/>

FieldWrapper & fieldAria

Layout helper and accessibility utility for building custom fields. See Custom Fields for details.

import { FieldWrapper, fieldAria } from "@squaredr/fieldcraft-react";

// FieldWrapper renders label, help text, error messages
<FieldWrapper field={field} error={error} touched={touched}>
  <input {...fieldAria(field, hasError)} />
</FieldWrapper>

Utility Functions

Export	Description
`cn(...classes)`	Tailwind class name merger (clsx + twMerge)
`formatPhone(value)`	Format phone number string
`formatCurrency(value, opts)`	Format currency display
`formatFileSize(bytes)`	Human-readable file size
`truncate(str, max)`	Truncate with ellipsis
`themeToCssVars(theme)`	Convert theme to CSS custom properties

Individual Field Components

All 36 field components are available as named exports for composition:

import {
  ShortTextField,
  LongTextField,
  EmailField,
  PhoneField,
  PhoneInternationalField,
  UrlField,
  LegalNameField,
  NumberField,
  SliderField,
  RatingField,
  NpsField,
  LikertField,
  OpinionScaleField,
  SingleSelectField,
  MultiSelectField,
  DropdownField,
  BooleanField,
  CountrySelectField,
  RankingField,
  DateField,
  DateRangeField,
  TimeField,
  AppointmentField,
  FileUploadField,
  SignatureField,
  ImageCaptureField,
  AddressField,
  PaymentField,
  MatrixField,
  RepeaterField,
  CalculatedField,
  HiddenField,
  ScoringField,
  ConsentField,
  InfoBlockField,
} from "@squaredr/fieldcraft-react";

← PreviousCore API Next →Schema Types