Group fields

GroupField allows you to nest fields under a single object key.

This mirrors the Storybook group-field examples.

import React from 'react';
import * as Yup from 'yup';

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

import { DynamicForm } from '../DynamicForm';
import { InputField } from '../fields/input';

export function GroupFieldExample() {
  return (
    <DynamicForm
      fields={[
        new InputField({
          id: 'firstName',
          label: 'First name',
          validate: Yup.string().required(),
          screenSize: 6,
        }),
        new InputField({
          id: 'lastName',
          label: 'Last name',
          validate: Yup.string().required(),
          screenSize: 6,
        }),
        new GroupField({
          id: 'contact',
          label: 'Contact',
          fields: [
            new InputField({
              id: 'email',
              label: 'Email',
              type: 'email',
              screenSize: 6,
            }),
            new InputField({
              id: 'phone',
              label: 'Phone',
              type: 'tel',
              screenSize: 6,
            }),
          ],
        }),
      ]}
      onSubmit={(values) => console.log(values)}
    />
  );
}