tessl/npm-rjsf--material-ui

Material UI theme integration for react-jsonschema-form providing dual v4/v5 compatibility with Material Design components, widgets, fields, and themes for JSON schema-based forms.

—

Pending

Overview

Eval results

Files

Field Templates

Name: tessl/npm-rjsf--material-ui
Author: tessl

Templates that control the layout and structure of form fields, providing consistent Material UI styling and behavior. Templates wrap widgets and handle common concerns like labels, help text, and error display.

Capabilities

FieldTemplate

Template for individual form fields that wraps widgets with Material UI FormControl and handles labels, help text, and error states.

/**
 * Wrapper template for individual fields with FormControl, error display, and help text
 * @param props - FieldTemplateProps containing field metadata and widget
 * @returns JSX.Element
 */
declare const FieldTemplate: React.ComponentType<FieldTemplateProps>;

Features:

FormControl wrapper for consistent styling
Label handling with required field indicators
Error message display using FormHelperText
Help text display from schema descriptions
Material UI theme integration

Usage:

Automatically applied to all fields in forms using this theme
Customizable via theme configuration

ArrayFieldTemplate

Template for array fields that provides add/remove/reorder controls with Material UI components.

/**
 * Template for array fields with add/remove/reorder controls using Paper, Grid, and IconButton
 * @param props - ArrayFieldTemplateProps containing array items and handlers
 * @returns JSX.Element
 */
declare const ArrayFieldTemplate: React.ComponentType<ArrayFieldTemplateProps>;

Features:

Paper wrapper for visual grouping
Grid layout for array items
Add button with AddIcon
Remove buttons with RemoveIcon for each item
Drag handles for reordering (ArrowUpwardIcon, ArrowDownwardIcon)
Title and description display

Usage:

Automatically applied to array type fields
Supports reorderable arrays with drag controls

ObjectFieldTemplate

Template for object fields that arranges properties in a responsive Grid layout.

/**
 * Template for object fields using Grid layout for properties
 * @param props - ObjectFieldTemplateProps containing object properties
 * @returns JSX.Element
 */
declare const ObjectFieldTemplate: React.ComponentType<ObjectFieldTemplateProps>;

Features:

Grid container for responsive layout
Individual Grid items for each property
Handles nested objects and complex structures
Title and description display

Usage:

Automatically applied to object type fields
Responsive layout adapts to screen size

Template Props

FieldTemplateProps

interface FieldTemplateProps {
  /** Unique field identifier */
  id: string;
  /** Field class name */
  classNames: string;
  /** Field label text */
  label?: string;
  /** Field description/help text */
  description?: React.ReactElement;
  /** Form validation errors for this field */
  errors?: React.ReactElement;
  /** Help text element */
  help?: React.ReactElement;
  /** Whether field is required */
  required?: boolean;
  /** Whether field is hidden */
  hidden?: boolean;
  /** Whether field is readonly */
  readonly?: boolean;
  /** Whether field is disabled */
  disabled?: boolean;
  /** The rendered widget component */
  children: React.ReactElement;
  /** Field schema */
  schema: JSONSchema7;
  /** Field UI schema */
  uiSchema?: UiSchema;
  /** Form context */
  formContext?: any;
  /** Raw validation errors */
  rawErrors?: string[];
  /** Display label flag */
  displayLabel?: boolean;
}

ArrayFieldTemplateProps

interface ArrayFieldTemplateProps {
  /** Whether the array can be reordered */
  canAdd?: boolean;
  /** Array class name */
  className?: string;
  /** Whether items are disabled */
  disabled?: boolean;
  /** Form context */
  formContext?: any;
  /** Field identifier prefix */
  idSchema: IdSchema;
  /** Array items */
  items: ArrayFieldTemplateItemType[];
  /** Add button handler */
  onAddClick: (event?: any) => void;
  /** Whether array is readonly */
  readonly?: boolean;
  /** Required fields */
  required?: boolean;
  /** Field schema */
  schema: JSONSchema7;
  /** Array title */
  title?: string;
  /** UI schema */
  uiSchema?: UiSchema;
  /** Form registry */
  registry: Registry;
}

interface ArrayFieldTemplateItemType {
  /** Item content element */
  children: React.ReactElement;
  /** Item class name */
  className?: string;
  /** Whether item is disabled */
  disabled?: boolean;
  /** Whether remove button should be shown */
  hasRemove?: boolean;
  /** Whether move up button should be shown */
  hasMoveUp?: boolean;
  /** Whether move down button should be shown */
  hasMoveDown?: boolean;
  /** Item index */
  index: number;
  /** Remove button click handler */
  onDropIndexClick: (index: number) => (event?: any) => void;
  /** Move up button click handler */
  onReorderClick: (index: number, newIndex: number) => (event?: any) => void;
  /** Whether item is readonly */
  readonly?: boolean;
  /** Item key */
  key: string;
}

ObjectFieldTemplateProps

interface ObjectFieldTemplateProps {
  /** Field description element */
  description?: React.ReactElement;
  /** Whether object is disabled */
  disabled?: boolean;
  /** Form context */
  formContext?: any;
  /** Field identifier schema */
  idSchema: IdSchema;
  /** Object properties */
  properties: ObjectFieldTemplatePropertyType[];
  /** Whether object is readonly */
  readonly?: boolean;
  /** Whether object is required */
  required?: boolean;
  /** Field schema */
  schema: JSONSchema7;
  /** Object title */
  title?: string;
  /** UI schema */
  uiSchema?: UiSchema;
  /** Form registry */
  registry: Registry;
}

interface ObjectFieldTemplatePropertyType {
  /** Property content element */
  content: React.ReactElement;
  /** Property name */
  name: string;
  /** Whether property is readonly */
  readonly?: boolean;
  /** Whether property is disabled */
  disabled?: boolean;
  /** Whether property is required */
  required?: boolean;
  /** Whether property is hidden */
  hidden?: boolean;
}

Customization Examples

Custom Field Template

import { FieldTemplateProps } from "@rjsf/core";
import { FormControl, FormLabel, FormHelperText } from "@mui/material";

const CustomFieldTemplate: React.FC<FieldTemplateProps> = ({
  id,
  classNames,
  label,
  help,
  required,
  description,
  errors,
  children,
  hidden,
}) => {
  if (hidden) return <div style={{ display: "none" }}>{children}</div>;

  return (
    <FormControl fullWidth className={classNames} margin="normal">
      {label && (
        <FormLabel htmlFor={id} required={required}>
          {label}
        </FormLabel>
      )}
      {description}
      {children}
      {errors}
      {help && <FormHelperText>{help}</FormHelperText>}
    </FormControl>
  );
};

Custom Array Template

import { ArrayFieldTemplateProps } from "@rjsf/core";
import { Paper, Box, Button, IconButton } from "@mui/material";
import { Add as AddIcon, Delete as DeleteIcon } from "@mui/icons-material";

const CustomArrayTemplate: React.FC<ArrayFieldTemplateProps> = ({
  items,
  onAddClick,
  canAdd,
  title,
  schema,
}) => {
  return (
    <Paper elevation={2} sx={{ p: 2 }}>
      {title && <h3>{title}</h3>}
      {items.map((item) => (
        <Box key={item.key} sx={{ mb: 2, display: "flex", alignItems: "center" }}>
          <Box sx={{ flexGrow: 1 }}>{item.children}</Box>
          {item.hasRemove && (
            <IconButton onClick={item.onDropIndexClick(item.index)}>
              <DeleteIcon />
            </IconButton>
          )}
        </Box>
      ))}
      {canAdd && (
        <Button startIcon={<AddIcon />} onClick={onAddClick}>
          Add Item
        </Button>
      )}
    </Paper>
  );
};

Using Custom Templates

import Form from "@rjsf/material-ui/v5";

function FormWithCustomTemplates() {
  return (
    <Form
      schema={schema}
      FieldTemplate={CustomFieldTemplate}
      ArrayFieldTemplate={CustomArrayTemplate}
      ObjectFieldTemplate={CustomObjectTemplate}
    />
  );
}

Template Override in Theme

import { withTheme } from "@rjsf/core";
import { Theme } from "@rjsf/material-ui/v5";

const customTheme = {
  ...Theme,
  FieldTemplate: CustomFieldTemplate,
  ArrayFieldTemplate: CustomArrayTemplate,
};

const CustomForm = withTheme(customTheme);