Usage

The main exported component is NvsDynamicForm.

Minimal example

import React from 'react';
import { NvsDynamicForm } from '@nvs-dynamic-form/react-core';

export function Example() {
  return (
    <NvsDynamicForm
      fields={[]}
      formElements={{}}
      buttonComponent={(props) => <button {...props} />}
      submitButtonDefaultOptions={{
        label: 'Submit',
        isFullWidth: false,
        position: 'right',
      }}
      onSubmit={async (values) => {
        console.log(values);
      }}
    />
  );
}

Props

NvsDynamicForm props (from INvsDynamicForm):

Prop	Type	Notes
onSubmit	(values: unknown) => void | Promise<void>	Submit callback (sync or async).
fields	Array<FieldBase | GroupField | ArrayField>	Form structure definition.
formClass	string	Optional className for the underlying <form>.
formElements	Record<string, { component: React.FC<any>; class: typeof FieldBase }>	Registry that maps fieldType → renderer + field model class.
container	React.FC<any>	Optional container component for wrapping the form or groups.
containerOptions	Record<string, any>	Props/options forwarded to the container implementation.
containerVisible	boolean	When true, wraps the whole form with container (unless useContainersOutsideGroup).
useContainersOutsideGroup	boolean	Controls container usage for nested group/array layouts.
useGroupContainer	boolean	Enables group container behavior in the builder.
buttonComponent	React.FC<any>	Submit/add/remove buttons are rendered via this component.
submitButtonDefaultOptions	ISubmitButtonDefaultOptions	Default submit button config (label, position, full width).
submitButtonOptions	Record<string, any>	Extra props forwarded to the submit button component.
submitButtonVisible	boolean	Show/hide submit button.
submitButtonLabel	string	Submit button label override.
submitButtonPosition	'left' | 'center' | 'right'	Submit button alignment.
submitButtonIsFullWidth	boolean	Full-width submit button.
submitButtonContainerClass	string	Class name for submit button container wrapper.
addButtonDefaultOptions	ArrayFieldAddButton	Default options for ArrayField add button.
removeButtonDefaultOptions	ArrayFieldRemoveButton	Default options for ArrayField remove button.
labelDefaultOptions	LabelOptions	Default label options used by internal field/label components.
doubleSubmitProtection	boolean	Prevents double submit while a submit is in progress.

note

The exact shape of field definitions and default options is exported from the package under types.

Examples

The package repo includes Storybook stories for many configurations.

In these docs, each example lives on its own page under Examples:

• DynamicForm wrapper (recommended starting point)
• Input + Textarea (minimal setup)
• GroupField
• ArrayField