Group fields

GroupField, field’ları tek bir obje key’i altında nest etmenizi sağlar.

Bu örnek Storybook’ta yer alan group-field örneklerinin mantığını takip eder.

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: 'Ad',
          validate: Yup.string().required(),
          screenSize: 6,
        }),
        new InputField({
          id: 'lastName',
          label: 'Soyad',
          validate: Yup.string().required(),
          screenSize: 6,
        }),
        new GroupField({
          id: 'contact',
          label: 'İletişim',
          fields: [
            new InputField({
              id: 'email',
              label: 'E-posta',
              type: 'email',
              screenSize: 6,
            }),
            new InputField({
              id: 'phone',
              label: 'Telefon',
              type: 'tel',
              screenSize: 6,
            }),
          ],
        }),
      ]}
      onSubmit={(values) => console.log(values)}
    />
  );
}