@sigamix/form-renderer

React form renderer — themeable, data-source-aware, zero UI dependency. Renders forms defined by @sigamix/form-core schemas.

Installation

npm install @sigamix/form-renderer @sigamix/form-core

Minimal Usage

import { FormRenderer } from '@sigamix/form-renderer'

<FormRenderer
  formSchema={myFormDefinition}
  onSubmit={(responses) => api.saveSubmission(responses)}
  mode="fill"
  labels={{ submit: 'Submit', next: 'Next', previous: 'Previous' }}
/>

Theme System

Inject your own colors, typography, and entire React components:

import type { ISigamixTheme } from '@sigamix/form-renderer'

const cepiciTheme: Partial<ISigamixTheme> = {
  colors: {
    primary: '#006B3F',
    secondary: '#D4A843',
    background: '#FEFEFE',
    surface: '#F0F7F4',
    error: '#DC2626',
    warning: '#F59E0B',
    success: '#16A34A',
    text: '#1A1A2E',
    textSecondary: '#6B7280',
    border: '#D1D5DB',
  },
  // Override built-in components with your design system
  components: {
    Button: MyCustomButton,
    Input: MyCustomInput,
    Select: MyCustomSelect,
  },
}

<FormRenderer formSchema={schema} theme={cepiciTheme} />

If theme.components.Select is provided, it replaces the default <select>. Otherwise, the built-in HTML component is used.

DataSource Connectors

Connect selection fields to live data with inter-field filtering:

import type { IDataSourceConnector } from '@sigamix/form-core'

const dataSources: Record<string, IDataSourceConnector> = {
  pays: {
    id: 'pays',
    name: 'Countries',
    fetch: async ({ search }) => api.getCountries({ search }),
  },
  communes: {
    id: 'communes',
    name: 'Communes (filtered by department)',
    fetch: async ({ dependsOn }) =>
      api.getCommunes({ departementId: dependsOn?.departementId }),
  },
}

<FormRenderer
  formSchema={schema}
  dataSources={dataSources}
  theme={cepiciTheme}
  onSubmit={handleSubmit}
/>

When a dependency value changes, the connected field automatically re-fetches with 150ms debounce and clears its current selection.

Modes

| Mode | Description | |------|-------------| | fill | Default — user can enter data and submit | | readonly | All fields disabled, no submit button | | review | Read-only with submission data pre-loaded |

<FormRenderer formSchema={schema} initialResponses={savedData} mode="readonly" />

Exported Components

FormRenderer · FormGroup · RosterRenderer · VariableRenderer · FieldWrapper · TextField · NumberField · DateField · CheckboxField · RadioField · SelectField · FormProgress · FormNavigation

All components are individually importable for advanced layouts.

License

Copyright (c) 2026 AFINOV SARL — All rights reserved. Commercial license required. Contact: [email protected]