Container

NvsDynamicForm supports a container component that can wrap:

• the whole form (via containerVisible)
• and/or nested group/array blocks (depending on useGroupContainer and useContainersOutsideGroup)

Example: wrap the whole form

import React from 'react';

import { DynamicForm } from '../components/dynamic-form/DynamicForm';
import { InputField } from '../components/dynamic-form/fields/input';

const Card: React.FC<{ title?: string; children: React.ReactNode }> = ({
  title,
  children,
}) => (
  <div style={{ border: '1px solid #eee', borderRadius: 8, padding: 16 }}>
    {title && <h3 style={{ marginTop: 0 }}>{title}</h3>}
    {children}
  </div>
);

export function ContainerExample() {
  return (
    <DynamicForm
      container={Card}
      containerVisible
      containerOptions={{ title: 'Profile form' }}
      fields={[new InputField({ id: 'firstName', label: 'First name' })]}
      onSubmit={(values) => console.log(values)}
    />
  );
}

Notes

• containerOptions is forwarded to your container implementation.
• For more complex layouts (groups/arrays), combine useGroupContainer / useContainersOutsideGroup.