or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

field-components.mdform-component.mdindex.mdregistry-system.mdtemplate-components.mdtheme-system.mdwidget-components.md
tile.json

tessl/npm-rjsf--core

A React component that automatically generates interactive web forms from JSON Schema definitions.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@rjsf/core@5.24.x

To install, run

npx @tessl/cli install tessl/npm-rjsf--core@5.24.0

index.mddocs/

@rjsf/core

@rjsf/core is a React component library that automatically generates interactive web forms from JSON Schema definitions. It provides comprehensive form field types, advanced validation capabilities through schema-based rules with custom error messages, and flexible theming support with multiple UI framework integrations.

Package Information

  • Package Name: @rjsf/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @rjsf/core

Core Imports

import Form from "@rjsf/core";
import { withTheme, getDefaultRegistry } from "@rjsf/core";
import type { FormProps, FormState, IChangeEvent, ThemeProps } from "@rjsf/core";

For CommonJS:

const Form = require("@rjsf/core").default;
const { withTheme, getDefaultRegistry } = require("@rjsf/core");

Basic Usage

import Form from "@rjsf/core";
import validator from "@rjsf/validator-ajv8";

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

const uiSchema = {
  age: { "ui:widget": "updown" },
  email: { "ui:widget": "email" }
};

function MyForm() {
  const [formData, setFormData] = useState({});
  
  const handleChange = ({ formData }) => {
    setFormData(formData);
  };
  
  const handleSubmit = ({ formData }) => {
    console.log("Form submitted:", formData);
  };

  return (
    <Form
      schema={schema}
      uiSchema={uiSchema}
      formData={formData}
      validator={validator}
      onChange={handleChange}
      onSubmit={handleSubmit}
    />
  );
}

Architecture

@rjsf/core is built around several key components:

  • Form Component: Main React component that renders JSON schemas as interactive forms
  • Registry System: Configurable registry of fields, widgets, and templates for customization
  • Theming Engine: Higher-order component system for applying consistent UI themes
  • Type System: Full TypeScript integration with generic type preservation for form data
  • Validation Integration: Seamless integration with validator libraries like AJV
  • Schema Processing: Intelligent JSON Schema interpretation with UI Schema overlay support

Capabilities

Form Component

Core form rendering component that converts JSON schemas into interactive React forms with full validation and customization support.

export default class Form<
  T = any,
  S extends StrictRJSFSchema = RJSFSchema,
  F extends FormContextType = any
> extends Component<FormProps<T, S, F>, FormState<T, S, F>> {
  submit(): void;
  validateForm(): boolean;
  reset(): void;
  focusOnError(error: RJSFValidationError): void;
}

interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  schema: S;
  validator: ValidatorType<T, S, F>;
  uiSchema?: UiSchema<T, S, F>;
  formData?: T;
  formContext?: F;
  idPrefix?: string;
  idSeparator?: string;
  disabled?: boolean;
  readonly?: boolean;
  fields?: RegistryFieldsType<T, S, F>;
  widgets?: RegistryWidgetsType<T, S, F>;
  templates?: Partial<TemplatesType<T, S, F>>;
  onChange?: (data: IChangeEvent<T, S, F>, id?: string) => void;
  onError?: (errors: RJSFValidationError[]) => void;
  onSubmit?: (data: IChangeEvent<T, S, F>, event: FormEvent<any>) => void;
  onBlur?: (id: string, data: any) => void;
  onFocus?: (id: string, data: any) => void;
  customValidate?: CustomValidator<T, S, F>;
  extraErrors?: ErrorSchema<T>;
  liveValidate?: boolean;
  noHtml5Validate?: boolean;
  showErrorList?: false | 'top' | 'bottom';
  transformErrors?: ErrorTransformer<T, S, F>;
  focusOnFirstError?: boolean | ((error: RJSFValidationError) => void);
  [key: string]: any;
}

interface IChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  schema: S;
  uiSchema: UiSchema<T, S, F>;
  idSchema: IdSchema<T>;
  schemaUtils: SchemaUtilsType<T, S, F>;
  formData?: T;
  edit: boolean;
  errors: RJSFValidationError[];
  errorSchema: ErrorSchema<T>;
  status?: 'submitted';
}

Form Component

Theme System

Higher-order component system for applying consistent UI themes and customizing form appearance across your application.

function withTheme<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
  themeProps: ThemeProps<T, S, F>
): ComponentType<FormProps<T, S, F>>;

interface ThemeProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  fields?: RegistryFieldsType<T, S, F>;
  templates?: Partial<TemplatesType<T, S, F>>;
  widgets?: RegistryWidgetsType<T, S, F>;
  _internalFormWrapper?: ElementType;
}

Theme System

Registry System

Configurable registry system providing default implementations of fields, widgets, and templates, with the ability to create custom registries.

function getDefaultRegistry<
  T = any,
  S extends StrictRJSFSchema = RJSFSchema,
  F extends FormContextType = any
>(): Omit<Registry<T, S, F>, 'schemaUtils'>;

interface Registry<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  fields: RegistryFieldsType<T, S, F>;
  templates: TemplatesType<T, S, F>;
  widgets: RegistryWidgetsType<T, S, F>;
  rootSchema: S;
  formContext: F;
  schemaUtils: SchemaUtilsType<T, S, F>;
  translateString: (str: TranslatableString, params?: string[]) => string;
}

Registry System

Field Components

Built-in field components that handle different JSON Schema types and provide the foundation for form rendering.

interface RegistryFieldsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  AnyOfField: ComponentType<FieldProps<T, S, F>>;
  ArrayField: ComponentType<FieldProps<T, S, F>>;
  BooleanField: ComponentType<FieldProps<T, S, F>>;
  NumberField: ComponentType<FieldProps<T, S, F>>;
  ObjectField: ComponentType<FieldProps<T, S, F>>;
  OneOfField: ComponentType<FieldProps<T, S, F>>;
  SchemaField: ComponentType<FieldProps<T, S, F>>;
  StringField: ComponentType<FieldProps<T, S, F>>;
  NullField: ComponentType<FieldProps<T, S, F>>;
}

Field Components

Widget Components

Input widgets that provide the actual form controls for different data input types, from text inputs to complex pickers.

interface RegistryWidgetsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  AltDateWidget: ComponentType<WidgetProps<T, S, F>>;
  AltDateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
  CheckboxWidget: ComponentType<WidgetProps<T, S, F>>;
  CheckboxesWidget: ComponentType<WidgetProps<T, S, F>>;
  ColorWidget: ComponentType<WidgetProps<T, S, F>>;
  DateWidget: ComponentType<WidgetProps<T, S, F>>;
  DateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
  EmailWidget: ComponentType<WidgetProps<T, S, F>>;
  FileWidget: ComponentType<WidgetProps<T, S, F>>;
  HiddenWidget: ComponentType<WidgetProps<T, S, F>>;
  PasswordWidget: ComponentType<WidgetProps<T, S, F>>;
  RadioWidget: ComponentType<WidgetProps<T, S, F>>;
  RangeWidget: ComponentType<WidgetProps<T, S, F>>;
  SelectWidget: ComponentType<WidgetProps<T, S, F>>;
  TextWidget: ComponentType<WidgetProps<T, S, F>>;
  TextareaWidget: ComponentType<WidgetProps<T, S, F>>;
  TimeWidget: ComponentType<WidgetProps<T, S, F>>;
  UpDownWidget: ComponentType<WidgetProps<T, S, F>>;
  URLWidget: ComponentType<WidgetProps<T, S, F>>;
}

Widget Components

Template Components

Layout and presentation templates that control how fields, errors, arrays, and other form elements are displayed and styled.

interface TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  ArrayFieldDescriptionTemplate: ComponentType<ArrayFieldDescriptionProps<T, S, F>>;
  ArrayFieldItemTemplate: ComponentType<ArrayFieldTemplateItemType<T, S, F>>;
  ArrayFieldTemplate: ComponentType<ArrayFieldTemplateProps<T, S, F>>;
  ArrayFieldTitleTemplate: ComponentType<ArrayFieldTitleProps<T, S, F>>;
  BaseInputTemplate: ComponentType<BaseInputTemplateProps<T, S, F>>;
  DescriptionFieldTemplate: ComponentType<DescriptionFieldProps<T, S, F>>;
  ErrorListTemplate: ComponentType<ErrorListProps<T, S, F>>;
  FieldTemplate: ComponentType<FieldTemplateProps<T, S, F>>;
  FieldErrorTemplate: ComponentType<FieldErrorProps<T, S, F>>;
  FieldHelpTemplate: ComponentType<FieldHelpProps<T, S, F>>;
  ObjectFieldTemplate: ComponentType<ObjectFieldTemplateProps<T, S, F>>;
  TitleFieldTemplate: ComponentType<TitleFieldProps<T, S, F>>;
  UnsupportedFieldTemplate: ComponentType<UnsupportedFieldProps<T, S, F>>;
  WrapIfAdditionalTemplate: ComponentType<WrapIfAdditionalTemplateProps<T, S, F>>;
  ButtonTemplates: {
    SubmitButton: ComponentType<SubmitButtonProps<T, S, F>>;
    AddButton: ComponentType<IconButtonProps<T, S, F>>;
    CopyButton: ComponentType<IconButtonProps<T, S, F>>;
    MoveDownButton: ComponentType<IconButtonProps<T, S, F>>;
    MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
    RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
  };
}

Template Components

Types

Core Types

interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  schema: S;
  uiSchema: UiSchema<T, S, F>;
  idSchema: IdSchema<T>;
  schemaUtils: SchemaUtilsType<T, S, F>;
  formData?: T;
  edit: boolean;
  errors: RJSFValidationError[];
  errorSchema: ErrorSchema<T>;
  schemaValidationErrors: RJSFValidationError[];
  schemaValidationErrorSchema: ErrorSchema<T>;
}

interface FieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  schema: S;
  uiSchema: UiSchema<T, S, F>;
  idSchema: IdSchema<T>;
  formData?: T;
  errorSchema: ErrorSchema<T>;
  onChange: (newFormData: any, newErrorSchema?: ErrorSchema<T>, id?: string) => void;
  onBlur: (id: string, data: any) => void;
  onFocus: (id: string, data: any) => void;
  registry: Registry<T, S, F>;
  formContext: F;
  autofocus?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  hideError?: boolean;
  name: string;
}

interface WidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  id: string;
  value: any;
  required?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  multiple?: boolean;
  autofocus?: boolean;
  onChange: (value: any) => void;
  onBlur: (id: string, value: any) => void;
  onFocus: (id: string, value: any) => void;
  options: NonNullable<UiSchema<T, S, F>['ui:options']> & {
    enumOptions?: { value: any; label: string }[];
  };
  schema: S;
  uiSchema?: UiSchema<T, S, F>;
  rawErrors?: string[];
  formContext: F;
  registry: Registry<T, S, F>;
  label: string;
  placeholder?: string;
  name: string;
}