react-mui-form

React MUI Form Library

A flexible, reusable form component library for React, built on top of Material-UI (MUI) components. Define your forms using a simple JSON schema and render fully controlled, accessible forms with minimal boilerplate.

Features

• Declarative JSON Schema: Define form fields, types, and layout in a JSON structure.
• MUI Integration: Uses MUI components for consistent, accessible UI.
• Controlled Inputs: All fields are fully controlled via React state.
• Field Types: Supports text, password, date, and switch fields out of the box.
• Customizable: Easily extend or style via MUI’s theming and your own components.

Usage

import { MFForm, type MFFormField } from 'react-mui-form';

const fields: MFFormField[][] = [
  [
    { name: 'username', label: 'Username', fieldType: 'text-field' },
    { name: 'password', label: 'Password', fieldType: 'password' },
  ],
  [
    { name: 'birthdate', label: 'Birthdate', fieldType: 'date' },
    { name: 'subscribe', label: 'Subscribe', fieldType: 'switch-field', isBool: true },
  ],
];

const [formState, setFormState] = useState({});

<MFForm fields={fields} states={formState} setStates={setFormState} />;

JSON Schema Example

Each field is defined as an object:

{
  name: string;           // Field key in state
  label?: string;         // Field label
  value?: string|boolean; // Initial value
  fieldType?: 'text-field' | 'password' | 'date' | 'switch-field';
  isBool?: boolean;       // For switch fields
  hide?: boolean;         // Hide field
  // ...other MUI props
}

Fields are grouped in rows (arrays of arrays) for layout.

Components

• MFForm: Main form renderer.
• MFInput: Text and select input.
• MFPassword: Password input.
• MFDateInput: Date picker.
• MFSwitch: Switch/toggle input.

Styling

Customize via the styles object or override MUI theme as needed.

---

See src/components/MFForm/index.tsx for the main