Basic

This example uses the recommended DynamicForm wrapper (see the dedicated page) and renders a minimal form with:

• InputField
• TextareaField

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

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

export function BasicExample() {
  return (
    <DynamicForm
      fields={[
        new InputField({
          id: 'email',
          label: 'Email',
          placeholder: 'name@company.com',
          type: 'email',
          validate: Yup.string().email().required(),
          screenSize: 12,
        }),
        new TextareaField({
          id: 'note',
          label: 'Note',
          placeholder: 'Write a note…',
          minRowSize: 6,
          screenSize: 12,
        }),
      ]}
      onSubmit={(values) => console.log(values)}
    />
  );
}