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

Widgets

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

Complete set of form input widgets styled with Material UI components for different data types and input methods. All widgets implement the WidgetProps interface from @rjsf/core.

Capabilities

Text Input Widgets

TextWidget

Basic text input widget using Material UI TextField component.

/**
 * Text input widget using TextField component with support for different input types
 * @param props - WidgetProps with text input specific options
 * @returns JSX.Element
 */
declare const TextWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string"
Supports: text, number, password, email, url input types via inputType option
Material UI components: TextField

TextareaWidget

Multi-line text input widget for longer text content.

/**
 * Multi-line text input widget using TextField with multiline prop
 * @param props - WidgetProps with textarea specific options (rows, etc.)
 * @returns JSX.Element
 */
declare const TextareaWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string" with ui:widget: "textarea"
Material UI components: TextField with multiline=true

PasswordWidget

Password input widget with hidden text display.

/**
 * Password input widget with hidden text using TextField type="password"
 * @param props - WidgetProps for password input
 * @returns JSX.Element
 */
declare const PasswordWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string" with format: "password"
Material UI components: TextField with type="password"

EmailWidget

Email input widget with built-in validation.

/**
 * Email input widget with validation using TextField type="email"
 * @param props - WidgetProps for email input
 * @returns JSX.Element
 */
declare const EmailWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string" with format: "email"
Material UI components: TextField with type="email"

URLWidget

URL input widget with validation for web addresses.

/**
 * URL input widget with validation using TextField type="url"
 * @param props - WidgetProps for URL input
 * @returns JSX.Element
 */
declare const URLWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string" with format: "uri"
Material UI components: TextField with type="url"

Selection Widgets

SelectWidget

Dropdown selection widget for choosing from predefined options.

/**
 * Dropdown select input using TextField with select prop and MenuItem options
 * @param props - WidgetProps with enum options or oneOf schema
 * @returns JSX.Element
 */
declare const SelectWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema: enum property or oneOf with title/const pairs
Material UI components: TextField (select=true), MenuItem

Example:

const schema = {
  type: "string",
  enum: ["option1", "option2", "option3"],
  enumNames: ["Option 1", "Option 2", "Option 3"]
};

RadioWidget

Radio button group for single selection from multiple options.

/**
 * Radio button group using RadioGroup and FormControlLabel components
 * @param props - WidgetProps with enum options
 * @returns JSX.Element
 */
declare const RadioWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema: enum with ui:widget: "radio"
Material UI components: FormControl, FormLabel, RadioGroup, FormControlLabel, Radio

CheckboxWidget

Single checkbox for boolean values.

/**
 * Single checkbox input using Checkbox and FormControlLabel
 * @param props - WidgetProps for boolean input
 * @returns JSX.Element
 */
declare const CheckboxWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "boolean"
Material UI components: FormControlLabel, Checkbox

CheckboxesWidget

Multiple checkbox selection for array values.

/**
 * Multiple checkbox selection using FormGroup with Checkbox controls
 * @param props - WidgetProps with enum options for array type
 * @returns JSX.Element
 */
declare const CheckboxesWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "array" with items.enum and uniqueItems: true
Material UI components: FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox

Date and Time Widgets

DateWidget

Date input widget for date selection.

/**
 * Date input widget using TextField with type="date"
 * @param props - WidgetProps for date input
 * @returns JSX.Element
 */
declare const DateWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string" with format: "date"
Material UI components: TextField with type="date"

DateTimeWidget

Date and time input widget for datetime selection.

/**
 * Date and time input widget using TextField with type="datetime-local"
 * @param props - WidgetProps for datetime input
 * @returns JSX.Element
 */
declare const DateTimeWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string" with format: "date-time"
Material UI components: TextField with type="datetime-local"

Numeric Widgets

UpDownWidget

Numeric input with up/down controls for integer values.

/**
 * Numeric input with up/down controls using TextField type="number"
 * @param props - WidgetProps for integer input
 * @returns JSX.Element
 */
declare const UpDownWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "integer"
Material UI components: TextField with type="number"

RangeWidget

Range slider widget for numeric values within a specific range.

/**
 * Range slider input using Material UI Slider component
 * @param props - WidgetProps with minimum/maximum values
 * @returns JSX.Element
 */
declare const RangeWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "integer" or "number" with ui:widget: "range"
Supports: minimum, maximum, multipleOf schema properties
Material UI components: FormControl, FormLabel, Slider

Other Widgets

ColorWidget

Color picker widget for color selection.

/**
 * Color picker widget using TextField with type="color"
 * @param props - WidgetProps for color input
 * @returns JSX.Element
 */
declare const ColorWidget: React.ComponentType<WidgetProps>;

Usage:

JSON Schema type: "string" with format: "color"
Material UI components: TextField with type="color"

SubmitButton

Form submit button with Material UI styling.

/**
 * Form submit button using Material UI Button component
 * @param props - WidgetProps for submit button
 * @returns JSX.Element
 */
declare const SubmitButton: React.ComponentType<WidgetProps>;

Usage:

Automatically included in forms
Material UI components: Button with type="submit"

Widget Props

All widgets receive the WidgetProps interface:

interface WidgetProps {
  /** Unique identifier for the widget */
  id: string;
  /** Current value of the widget */
  value: any;
  /** Display label for the widget */
  label?: string;
  /** Change handler called when value changes */
  onChange: (value: any) => void;
  /** Blur handler called when widget loses focus */
  onBlur?: (id: string, value: any) => void;
  /** Focus handler called when widget gains focus */
  onFocus?: (id: string, value: any) => void;
  /** Widget-specific options from UI schema */
  options?: { [key: string]: any };
  /** JSON Schema for this field */
  schema: JSONSchema7;
  /** UI Schema for this field */
  uiSchema?: UiSchema;
  /** Whether the widget is readonly */
  readonly?: boolean;
  /** Whether the widget is disabled */
  disabled?: boolean;
  /** Whether the field is required */
  required?: boolean;
  /** Whether multiple values are allowed */
  multiple?: boolean;
  /** Array of validation error messages */
  rawErrors?: string[];
  /** Form context object */
  formContext?: any;
  /** Whether the widget should autofocus */
  autofocus?: boolean;
  /** Placeholder text for the widget */
  placeholder?: string;
}

Widget Collection Export

All widgets are available as a collection:

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>;
}

declare const Widgets: WidgetCollection;

Usage Examples

Custom Widget Integration

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

const customWidgets = {
  ...Widgets,
  MyCustomWidget: ({ value, onChange }) => (
    <input value={value} onChange={(e) => onChange(e.target.value)} />
  ),
};

function FormWithCustomWidget() {
  return (
    <Form
      schema={schema}
      widgets={customWidgets}
      uiSchema={{
        myField: { "ui:widget": "MyCustomWidget" }
      }}
    />
  );
}

Widget Options

const uiSchema = {
  description: {
    "ui:widget": "textarea",
    "ui:options": {
      rows: 5,
      placeholder: "Enter description..."
    }
  },
  rating: {
    "ui:widget": "range",
    "ui:options": {
      step: 0.5
    }
  }
};

Install with Tessl CLI