0
# @rjsf/core
1

2
@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.
3

4
## Package Information
5

6
- **Package Name**: @rjsf/core
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @rjsf/core`
10

11
## Core Imports
12

13
```typescript
14
import Form from "@rjsf/core";
15
import { withTheme, getDefaultRegistry } from "@rjsf/core";
16
import type { FormProps, FormState, IChangeEvent, ThemeProps } from "@rjsf/core";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const Form = require("@rjsf/core").default;
23
const { withTheme, getDefaultRegistry } = require("@rjsf/core");
24
```
25

26
## Basic Usage
27

28
```typescript
29
import Form from "@rjsf/core";
30
import validator from "@rjsf/validator-ajv8";
31

32
const schema = {
33
  type: "object",
34
  properties: {
35
    name: { type: "string", title: "Name" },
36
    age: { type: "number", title: "Age", minimum: 0 },
37
    email: { type: "string", format: "email", title: "Email" }
38
  },
39
  required: ["name", "email"]
40
};
41

42
const uiSchema = {
43
  age: { "ui:widget": "updown" },
44
  email: { "ui:widget": "email" }
45
};
46

47
function MyForm() {
48
  const [formData, setFormData] = useState({});
49
  
50
  const handleChange = ({ formData }) => {
51
    setFormData(formData);
52
  };
53
  
54
  const handleSubmit = ({ formData }) => {
55
    console.log("Form submitted:", formData);
56
  };
57

58
  return (
59
    <Form
60
      schema={schema}
61
      uiSchema={uiSchema}
62
      formData={formData}
63
      validator={validator}
64
      onChange={handleChange}
65
      onSubmit={handleSubmit}
66
    />
67
  );
68
}
69
```
70

71
## Architecture
72

73
@rjsf/core is built around several key components:
74

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

82
## Capabilities
83

84
### Form Component
85

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

88
```typescript { .api }
89
export default class Form<
90
  T = any,
91
  S extends StrictRJSFSchema = RJSFSchema,
92
  F extends FormContextType = any
93
> extends Component<FormProps<T, S, F>, FormState<T, S, F>> {
94
  submit(): void;
95
  validateForm(): boolean;
96
  reset(): void;
97
  focusOnError(error: RJSFValidationError): void;
98
}
99

100
interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
101
  schema: S;
102
  validator: ValidatorType<T, S, F>;
103
  uiSchema?: UiSchema<T, S, F>;
104
  formData?: T;
105
  formContext?: F;
106
  idPrefix?: string;
107
  idSeparator?: string;
108
  disabled?: boolean;
109
  readonly?: boolean;
110
  fields?: RegistryFieldsType<T, S, F>;
111
  widgets?: RegistryWidgetsType<T, S, F>;
112
  templates?: Partial<TemplatesType<T, S, F>>;
113
  onChange?: (data: IChangeEvent<T, S, F>, id?: string) => void;
114
  onError?: (errors: RJSFValidationError[]) => void;
115
  onSubmit?: (data: IChangeEvent<T, S, F>, event: FormEvent<any>) => void;
116
  onBlur?: (id: string, data: any) => void;
117
  onFocus?: (id: string, data: any) => void;
118
  customValidate?: CustomValidator<T, S, F>;
119
  extraErrors?: ErrorSchema<T>;
120
  liveValidate?: boolean;
121
  noHtml5Validate?: boolean;
122
  showErrorList?: false | 'top' | 'bottom';
123
  transformErrors?: ErrorTransformer<T, S, F>;
124
  focusOnFirstError?: boolean | ((error: RJSFValidationError) => void);
125
  [key: string]: any;
126
}
127

128
interface IChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
129
  schema: S;
130
  uiSchema: UiSchema<T, S, F>;
131
  idSchema: IdSchema<T>;
132
  schemaUtils: SchemaUtilsType<T, S, F>;
133
  formData?: T;
134
  edit: boolean;
135
  errors: RJSFValidationError[];
136
  errorSchema: ErrorSchema<T>;
137
  status?: 'submitted';
138
}
139
```
140

141
[Form Component](./form-component.md)
142

143
### Theme System
144

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

147
```typescript { .api }
148
function withTheme<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
149
  themeProps: ThemeProps<T, S, F>
150
): ComponentType<FormProps<T, S, F>>;
151

152
interface ThemeProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
153
  fields?: RegistryFieldsType<T, S, F>;
154
  templates?: Partial<TemplatesType<T, S, F>>;
155
  widgets?: RegistryWidgetsType<T, S, F>;
156
  _internalFormWrapper?: ElementType;
157
}
158
```
159

160
[Theme System](./theme-system.md)
161

162
### Registry System
163

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

166
```typescript { .api }
167
function getDefaultRegistry<
168
  T = any,
169
  S extends StrictRJSFSchema = RJSFSchema,
170
  F extends FormContextType = any
171
>(): Omit<Registry<T, S, F>, 'schemaUtils'>;
172

173
interface Registry<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
174
  fields: RegistryFieldsType<T, S, F>;
175
  templates: TemplatesType<T, S, F>;
176
  widgets: RegistryWidgetsType<T, S, F>;
177
  rootSchema: S;
178
  formContext: F;
179
  schemaUtils: SchemaUtilsType<T, S, F>;
180
  translateString: (str: TranslatableString, params?: string[]) => string;
181
}
182
```
183

184
[Registry System](./registry-system.md)
185

186
### Field Components
187

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

190
```typescript { .api }
191
interface RegistryFieldsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
192
  AnyOfField: ComponentType<FieldProps<T, S, F>>;
193
  ArrayField: ComponentType<FieldProps<T, S, F>>;
194
  BooleanField: ComponentType<FieldProps<T, S, F>>;
195
  NumberField: ComponentType<FieldProps<T, S, F>>;
196
  ObjectField: ComponentType<FieldProps<T, S, F>>;
197
  OneOfField: ComponentType<FieldProps<T, S, F>>;
198
  SchemaField: ComponentType<FieldProps<T, S, F>>;
199
  StringField: ComponentType<FieldProps<T, S, F>>;
200
  NullField: ComponentType<FieldProps<T, S, F>>;
201
}
202
```
203

204
[Field Components](./field-components.md)
205

206
### Widget Components
207

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

210
```typescript { .api }
211
interface RegistryWidgetsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
212
  AltDateWidget: ComponentType<WidgetProps<T, S, F>>;
213
  AltDateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
214
  CheckboxWidget: ComponentType<WidgetProps<T, S, F>>;
215
  CheckboxesWidget: ComponentType<WidgetProps<T, S, F>>;
216
  ColorWidget: ComponentType<WidgetProps<T, S, F>>;
217
  DateWidget: ComponentType<WidgetProps<T, S, F>>;
218
  DateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
219
  EmailWidget: ComponentType<WidgetProps<T, S, F>>;
220
  FileWidget: ComponentType<WidgetProps<T, S, F>>;
221
  HiddenWidget: ComponentType<WidgetProps<T, S, F>>;
222
  PasswordWidget: ComponentType<WidgetProps<T, S, F>>;
223
  RadioWidget: ComponentType<WidgetProps<T, S, F>>;
224
  RangeWidget: ComponentType<WidgetProps<T, S, F>>;
225
  SelectWidget: ComponentType<WidgetProps<T, S, F>>;
226
  TextWidget: ComponentType<WidgetProps<T, S, F>>;
227
  TextareaWidget: ComponentType<WidgetProps<T, S, F>>;
228
  TimeWidget: ComponentType<WidgetProps<T, S, F>>;
229
  UpDownWidget: ComponentType<WidgetProps<T, S, F>>;
230
  URLWidget: ComponentType<WidgetProps<T, S, F>>;
231
}
232
```
233

234
[Widget Components](./widget-components.md)
235

236
### Template Components
237

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

240
```typescript { .api }
241
interface TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
242
  ArrayFieldDescriptionTemplate: ComponentType<ArrayFieldDescriptionProps<T, S, F>>;
243
  ArrayFieldItemTemplate: ComponentType<ArrayFieldTemplateItemType<T, S, F>>;
244
  ArrayFieldTemplate: ComponentType<ArrayFieldTemplateProps<T, S, F>>;
245
  ArrayFieldTitleTemplate: ComponentType<ArrayFieldTitleProps<T, S, F>>;
246
  BaseInputTemplate: ComponentType<BaseInputTemplateProps<T, S, F>>;
247
  DescriptionFieldTemplate: ComponentType<DescriptionFieldProps<T, S, F>>;
248
  ErrorListTemplate: ComponentType<ErrorListProps<T, S, F>>;
249
  FieldTemplate: ComponentType<FieldTemplateProps<T, S, F>>;
250
  FieldErrorTemplate: ComponentType<FieldErrorProps<T, S, F>>;
251
  FieldHelpTemplate: ComponentType<FieldHelpProps<T, S, F>>;
252
  ObjectFieldTemplate: ComponentType<ObjectFieldTemplateProps<T, S, F>>;
253
  TitleFieldTemplate: ComponentType<TitleFieldProps<T, S, F>>;
254
  UnsupportedFieldTemplate: ComponentType<UnsupportedFieldProps<T, S, F>>;
255
  WrapIfAdditionalTemplate: ComponentType<WrapIfAdditionalTemplateProps<T, S, F>>;
256
  ButtonTemplates: {
257
    SubmitButton: ComponentType<SubmitButtonProps<T, S, F>>;
258
    AddButton: ComponentType<IconButtonProps<T, S, F>>;
259
    CopyButton: ComponentType<IconButtonProps<T, S, F>>;
260
    MoveDownButton: ComponentType<IconButtonProps<T, S, F>>;
261
    MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
262
    RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
263
  };
264
}
265
```
266

267
[Template Components](./template-components.md)
268

269
## Types
270

271
### Core Types
272

273
```typescript { .api }
274
interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
275
  schema: S;
276
  uiSchema: UiSchema<T, S, F>;
277
  idSchema: IdSchema<T>;
278
  schemaUtils: SchemaUtilsType<T, S, F>;
279
  formData?: T;
280
  edit: boolean;
281
  errors: RJSFValidationError[];
282
  errorSchema: ErrorSchema<T>;
283
  schemaValidationErrors: RJSFValidationError[];
284
  schemaValidationErrorSchema: ErrorSchema<T>;
285
}
286

287
interface FieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
288
  schema: S;
289
  uiSchema: UiSchema<T, S, F>;
290
  idSchema: IdSchema<T>;
291
  formData?: T;
292
  errorSchema: ErrorSchema<T>;
293
  onChange: (newFormData: any, newErrorSchema?: ErrorSchema<T>, id?: string) => void;
294
  onBlur: (id: string, data: any) => void;
295
  onFocus: (id: string, data: any) => void;
296
  registry: Registry<T, S, F>;
297
  formContext: F;
298
  autofocus?: boolean;
299
  disabled?: boolean;
300
  readonly?: boolean;
301
  hideError?: boolean;
302
  name: string;
303
}
304

305
interface WidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
306
  id: string;
307
  value: any;
308
  required?: boolean;
309
  disabled?: boolean;
310
  readonly?: boolean;
311
  multiple?: boolean;
312
  autofocus?: boolean;
313
  onChange: (value: any) => void;
314
  onBlur: (id: string, value: any) => void;
315
  onFocus: (id: string, value: any) => void;
316
  options: NonNullable<UiSchema<T, S, F>['ui:options']> & {
317
    enumOptions?: { value: any; label: string }[];
318
  };
319
  schema: S;
320
  uiSchema?: UiSchema<T, S, F>;
321
  rawErrors?: string[];
322
  formContext: F;
323
  registry: Registry<T, S, F>;
324
  label: string;
325
  placeholder?: string;
326
  name: string;
327
}
328
```