CtrlK
BlogDocsLog inGet started
Tessl Logo

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
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@rjsf/material-ui

@rjsf/material-ui provides comprehensive Material UI theme integration for react-jsonschema-form, offering both Material UI v4 and v5 compatibility through separate entry points. It includes custom fields, widgets, and themes that enable developers to create JSON schema-based forms with Material Design components and styling.

Package Information

  • Package Name: @rjsf/material-ui
  • Package Type: npm
  • Language: TypeScript
  • License: Apache-2.0
  • Installation: npm install @rjsf/material-ui

Core Imports

The package provides three entry points:

  • Main entry (@rjsf/material-ui): Material UI v4 by default, exports all components
  • v4 entry (@rjsf/material-ui/v4): Explicit Material UI v4 theme
  • v5 entry (@rjsf/material-ui/v5): Material UI v5 theme

Default Import (Material UI v4)

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

Version-Specific Imports

Material UI v4:

import Form from "@rjsf/material-ui/v4";
// or
import { withTheme } from "@rjsf/core";
import Theme from "@rjsf/material-ui/v4";
const Form = withTheme(Theme);

Material UI v5:

import Form from "@rjsf/material-ui/v5";
// or
import { withTheme } from "@rjsf/core";
import Theme from "@rjsf/material-ui/v5";
const Form = withTheme(Theme);

Component Imports

import { 
  Fields, 
  Widgets, 
  FieldTemplate, 
  ArrayFieldTemplate, 
  ObjectFieldTemplate,
  Theme,
  Theme4,
  Theme5,
  MuiForm,
  MuiForm4, 
  MuiForm5,
  MuiComponentContext
} from "@rjsf/material-ui";

CommonJS:

const Form = require("@rjsf/material-ui").default;
// or
const { Fields, Widgets, Theme, Theme4, Theme5, MuiComponentContext } = require("@rjsf/material-ui");
// Version-specific
const Form4 = require("@rjsf/material-ui/v4").default;
const Form5 = require("@rjsf/material-ui/v5").default;

Basic Usage

Simple Form with Material UI v5

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

const schema = {
  type: "object",
  properties: {
    name: { type: "string", title: "Name" },
    email: { type: "string", format: "email", title: "Email" },
    age: { type: "integer", title: "Age", minimum: 18 }
  },
  required: ["name", "email"]
};

function MyForm() {
  return (
    <Form
      schema={schema}
      onSubmit={({formData}) => console.log("Submitted:", formData)}
    />
  );
}

Custom Theme Configuration

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

// Customize the theme with additional widgets
const customTheme = {
  ...Theme,
  widgets: {
    ...Theme.widgets,
    CustomWidget: MyCustomWidget
  }
};

const CustomForm = withTheme(customTheme);

Architecture

@rjsf/material-ui is built around several key components:

  • Dual Version Support: Separate builds for Material UI v4 and v5 with shared component logic
  • Context System: React Context provides Material UI components to widgets and fields
  • Theme Integration: Extends @rjsf/core theming system with Material UI-specific implementations
  • Widget Library: Comprehensive set of form controls using Material UI components
  • Template System: Custom field and array templates with Material Design styling
  • Type Safety: Full TypeScript support with proper type definitions for all components

Capabilities

Form Components

Pre-configured form components with Material UI themes and all necessary widgets and fields.

declare const MuiForm: React.ComponentType<FormProps<any>>;
declare const MuiForm4: React.ComponentType<FormProps<any>>;
declare const MuiForm5: React.ComponentType<FormProps<any>>;

Form Components

Widgets

Complete set of form input widgets styled with Material UI components for different data types and input methods.

interface WidgetCollection {
  CheckboxWidget: React.ComponentType<WidgetProps>;
  CheckboxesWidget: React.ComponentType<WidgetProps>;
  ColorWidget: React.ComponentType<WidgetProps>;
  DateWidget: React.ComponentType<WidgetProps>;
  DateTimeWidget: React.ComponentType<WidgetProps>;
  EmailWidget: React.ComponentType<WidgetProps>;
  PasswordWidget: React.ComponentType<WidgetProps>;
  RadioWidget: React.ComponentType<WidgetProps>;
  RangeWidget: React.ComponentType<WidgetProps>;
  SelectWidget: React.ComponentType<WidgetProps>;
  SubmitButton: React.ComponentType<WidgetProps>;
  TextWidget: React.ComponentType<WidgetProps>;
  TextareaWidget: React.ComponentType<WidgetProps>;
  URLWidget: React.ComponentType<WidgetProps>;
  UpDownWidget: React.ComponentType<WidgetProps>;
}

Widgets

Field Templates

Templates that control the layout and structure of form fields, providing consistent Material UI styling and behavior.

declare const FieldTemplate: React.ComponentType<FieldTemplateProps>;
declare const ArrayFieldTemplate: React.ComponentType<ArrayFieldTemplateProps>;
declare const ObjectFieldTemplate: React.ComponentType<ObjectFieldTemplateProps>;

Field Templates

Fields

Custom field components for specific rendering needs like titles and descriptions.

interface FieldCollection {
  DescriptionField: React.ComponentType<FieldProps>;
  TitleField: React.ComponentType<FieldProps>;
}

Fields

Themes

Theme objects that configure the complete form appearance and behavior for different Material UI versions.

interface ThemeProps {
  _internalFormWrapper?: React.ComponentType<any>;
  ArrayFieldTemplate?: React.ComponentType<ArrayFieldTemplateProps>;
  FieldTemplate?: React.ComponentType<FieldTemplateProps>;
  ObjectFieldTemplate?: React.ComponentType<ObjectFieldTemplateProps>;
  fields?: { [key: string]: React.ComponentType<FieldProps> };
  widgets?: { [key: string]: React.ComponentType<WidgetProps> };
  ErrorList?: React.ComponentType<ErrorListProps>;
}

declare const Theme: ThemeProps;
declare const Theme4: ThemeProps;
declare const Theme5: ThemeProps;

Themes

Component Context

React Context system for providing Material UI components to form elements, enabling version compatibility.

declare const MuiComponentContext: React.Context<MaterialUIContextProps | Mui5ContextProps | null>;

function useMuiComponent(): MaterialUIContextProps | Mui5ContextProps;

Component Context

Error List

Material UI styled error list component for displaying form validation errors in a structured format.

declare const ErrorList: React.ComponentType<ErrorListProps>;

interface ErrorListProps {
  errors: AjvError[];
  errorSchema: ErrorSchema;
  schema: JSONSchema7;
  uiSchema: UiSchema;
  formContext: any;
}

Types

Core Types

// Re-exported from @rjsf/core
interface FormProps<T = any> {
  schema: JSONSchema7;
  formData?: T;
  onSubmit?: (data: ISubmitEvent<T>) => void;
  onChange?: (data: IChangeEvent<T>) => void;
  onError?: (errors: AjvError[]) => void;
  // ... additional FormProps from @rjsf/core
}

interface WidgetProps {
  id: string;
  value: any;
  label?: string;
  onChange: (value: any) => void;
  onBlur?: (id: string, value: any) => void;
  onFocus?: (id: string, value: any) => void;
  options?: { [key: string]: any };
  schema: JSONSchema7;
  uiSchema?: UiSchema;
  readonly?: boolean;
  disabled?: boolean;
  required?: boolean;
  multiple?: boolean;
  rawErrors?: string[];
  // ... additional properties
}

interface FieldProps {
  name: string;
  title?: string;
  description?: string;
  properties?: { [key: string]: any };
  schema: JSONSchema7;
  uiSchema?: UiSchema;
  formData?: any;
  // ... additional properties
}

Material UI Context Types

interface MaterialUIContextProps {
  Box: React.ComponentType<BoxProps>;
  Button: React.ComponentType<ButtonProps>;
  Checkbox: React.ComponentType<CheckboxProps>;
  Divider: React.ComponentType<DividerProps>;
  Grid: React.ComponentType<GridProps>;
  FormControl: React.ComponentType<FormControlProps>;
  FormControlLabel: React.ComponentType<FormControlLabelProps>;
  FormGroup: React.ComponentType<FormGroupProps>;
  FormHelperText: React.ComponentType<FormHelperTextProps>;
  FormLabel: React.ComponentType<FormLabelProps>;
  IconButton: React.ComponentType<IconButtonProps>;
  Input: React.ComponentType<InputProps>;
  InputLabel: React.ComponentType<InputLabelProps>;
  List: React.ComponentType<ListProps>;
  ListItem: React.ComponentType<ListItemProps>;
  ListItemIcon: React.ComponentType<ListItemIconProps>;
  ListItemText: React.ComponentType<ListItemTextProps>;
  MenuItem: React.ComponentType<MenuItemProps>;
  Paper: React.ComponentType<PaperProps>;
  Radio: React.ComponentType<RadioProps>;
  RadioGroup: React.ComponentType<RadioGroupProps>;
  Slider: React.ComponentType<SliderProps>;
  TextField: React.ComponentType<Omit<TextFieldProps, 'color' | 'variant'>>;
  Typography: React.ComponentType<TypographyProps>;
  AddIcon: React.ComponentType<SvgIconProps>;
  ArrowDownwardIcon: React.ComponentType<SvgIconProps>;
  ArrowUpwardIcon: React.ComponentType<SvgIconProps>;
  ErrorIcon: React.ComponentType<SvgIconProps>;
  RemoveIcon: React.ComponentType<SvgIconProps>;
}

interface Mui5ContextProps {
  // Same interface as MaterialUIContextProps but for @mui/material v5
  Box: React.ComponentType<BoxProps>;
  Button: React.ComponentType<ButtonProps>;
  // ... (same properties as MaterialUIContextProps)
  Input: React.ComponentType<OutlinedInputProps>; // v5 uses OutlinedInputProps instead of InputProps
  // ... rest of properties
}

docs

component-context.md

field-templates.md

fields.md

form-components.md

index.md

themes.md

widgets.md

tile.json