Examples

Find configuration entry points by scenario, with concise snippets, full documentation links, and interactive playground links.

Minimal Form

Render basic fields from a flat FormConfig and delegate submit handling to Ant Design Form.

const formConfig = {
  fields: [
    { id: 'name', label: 'Name', component: 'TextInput', required: true }
  ]
};

Docs Playground

Grouped Form

Organize fields in groups, using the default Card layout or replacing the shell with render hooks.

const formConfig = {
  groups: [
    { id: 'basic', title: 'Basic', fields: [{ id: 'email', component: 'TextInput' }] }
  ]
};

Docs Playground

Field Effects

Use dependents and effect to return visible, disabled, value, or render meta updates.

{
  id: 'companyName',
  dependents: ['hasCompany'],
  effect: (_value, allValues) => ({ visible: allValues.hasCompany === true })
}

Docs Playground

Custom Components

<DynamicForm
  componentRegistry={{ customComponents: { ProjectSelect } }}
  formConfig={formConfig}
/>

Docs Playground

Custom Handlers

Map effect return values to business semantics while keeping components focused on rendering.

const handler = {
  name: 'highlight',
  canHandle: (key) => key === 'highlight',
  handle: (context, enabled) => context.updateFieldMeta({ componentProps: { enabled } })
};

Docs Playground

Compiler / Adapter

Adapt JsonSchema, OpenAPI, or metadata into module config, then compile it into standard FormConfig.

const compiled = compileAdaptedFormConfig(schema, {
  adapterType: 'json-schema',
  moduleRegistry
});

Docs Playground