Form

Metafox includes the most popular React Form library formik and validation with yup, wraps theme in FormBuilder in order to help build, configure flexible logic from AdminCP without modifying source code.

The Form mechanism on MetaFox is based on formik + material-ui. It can build a Form with certain fields & structure with JSON schema. Let's take a look at the below example.

Schema

import { Form } from '@metafox/form';

const ExampleLoginForm = () => {
  const loginFormSchema = {
    container: true,
    component: 'form',
    elements: {
      email: {
        label: 'Email',
        component: 'text',
        type: 'email',
        variant: 'outlined'
      },
      password: {
        label: 'Password',
        component: 'Email',
        type: 'password',
        variant: 'outlined'
      },
      buttons: {
        container: true,
        component: 'html',
        elements: {
          submit: {
            label: 'Login',
            type: 'submit'
          }
        }
      }
    }
  };
  const initialValues = {
    email: '[email protected]',
    password: ''
  };

  return <Form schema={loginFormSchema} initialValues={initialValues} />;
};

Elements

Here is the list of Supported Form elements

text
switch
checkbox
checkboxGroup
radio
radioGroup
select
date
datetime
time
slider
markSlider
category
tags
privacy
button
buttonGroup
hidden
editor
link
typo
container
dialogHeader
dialogFooter
dialogContent

Text

Definition

export type TextFieldProps = {
  name: string;
  component: 'text';
  label: string;
  placeholder: string;
  readOnly?: boolean;
  disabled?: boolean;
  required?: boolean;
  maxLength?: number;
  variant?: 'outlined' | 'filled';
  type?: 'text' | 'email' | 'password' | 'number' | 'date' | 'time';
};

Blow is the example to create a Text element

const Field = {
  name: 'title',
  component: 'text',
  label: 'Title',
  placeholder: 'Enter an title for this blog',
  readOnly: false, // optional
  disabled: false, // optional
  required: false, // optional
  maxLength: 250, // optional
  autoComplete: true, //optional,
  variant: 'outlined'
};