0
# Registry System
1

2
The registry system provides configurable collections of fields, widgets, and templates that define how forms are rendered. It includes default implementations and allows for complete customization of form behavior.
3

4
## Capabilities
5

6
### getDefaultRegistry Function
7

8
Returns the default registry containing all built-in fields, widgets, and templates provided by @rjsf/core.
9

10
```typescript { .api }
11
/**
12
 * Get the default registry with all built-in components
13
 * @returns Default registry without schemaUtils (added by Form component)
14
 */
15
function getDefaultRegistry<
16
  T = any,
17
  S extends StrictRJSFSchema = RJSFSchema,
18
  F extends FormContextType = any
19
>(): Omit<Registry<T, S, F>, 'schemaUtils'>;
20
```
21

22
**Usage Examples:**
23

24
```typescript
25
import { getDefaultRegistry } from "@rjsf/core";
26

27
// Get default registry
28
const defaultRegistry = getDefaultRegistry();
29

30
// Extend default registry with custom components
31
const customRegistry = {
32
  ...defaultRegistry,
33
  widgets: {
34
    ...defaultRegistry.widgets,
35
    CustomTextWidget: MyCustomTextWidget,
36
    CustomSelectWidget: MyCustomSelectWidget,
37
  },
38
  fields: {
39
    ...defaultRegistry.fields,
40
    CustomStringField: MyCustomStringField,
41
  }
42
};
43

44
// Use with Form component
45
<Form
46
  schema={schema}
47
  validator={validator}
48
  widgets={customRegistry.widgets}
49
  fields={customRegistry.fields}
50
  templates={customRegistry.templates}
51
/>
52
```
53

54
### Registry Interface
55

56
Complete registry interface containing all components and configuration needed for form rendering.
57

58
```typescript { .api }
59
interface Registry<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
60
  /** Field components for different schema types */
61
  fields: RegistryFieldsType<T, S, F>;
62
  /** Template components for layout and presentation */
63
  templates: TemplatesType<T, S, F>;
64
  /** Widget components for input controls */
65
  widgets: RegistryWidgetsType<T, S, F>;
66
  /** Root schema being processed */
67
  rootSchema: S;
68
  /** Form context passed to all components */
69
  formContext: F;
70
  /** Schema utilities for processing schemas */
71
  schemaUtils: SchemaUtilsType<T, S, F>;
72
  /** Translation function for internationalization */
73
  translateString: (str: TranslatableString, params?: string[]) => string;
74
}
75
```
76

77
### RegistryFieldsType Interface
78

79
Collection of field components that handle different JSON Schema types.
80

81
```typescript { .api }
82
interface RegistryFieldsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
83
  /** Handles anyOf schema unions */
84
  AnyOfField: ComponentType<FieldProps<T, S, F>>;
85
  /** Handles array type schemas */
86
  ArrayField: ComponentType<FieldProps<T, S, F>>;
87
  /** Handles boolean type schemas */
88
  BooleanField: ComponentType<FieldProps<T, S, F>>;
89
  /** Handles number and integer type schemas */
90
  NumberField: ComponentType<FieldProps<T, S, F>>;
91
  /** Handles object type schemas */
92
  ObjectField: ComponentType<FieldProps<T, S, F>>;
93
  /** Handles oneOf schema unions */
94
  OneOfField: ComponentType<FieldProps<T, S, F>>;
95
  /** Root field router that determines which field to render */
96
  SchemaField: ComponentType<FieldProps<T, S, F>>;
97
  /** Handles string type schemas */
98
  StringField: ComponentType<FieldProps<T, S, F>>;
99
  /** Handles null type schemas */
100
  NullField: ComponentType<FieldProps<T, S, F>>;
101
}
102
```
103

104
### RegistryWidgetsType Interface
105

106
Collection of widget components that provide input controls for form fields.
107

108
```typescript { .api }
109
interface RegistryWidgetsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
110
  /** Alternative date picker widget */
111
  AltDateWidget: ComponentType<WidgetProps<T, S, F>>;
112
  /** Alternative datetime picker widget */
113
  AltDateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
114
  /** Single checkbox widget */
115
  CheckboxWidget: ComponentType<WidgetProps<T, S, F>>;
116
  /** Multiple checkboxes widget for enum arrays */
117
  CheckboxesWidget: ComponentType<WidgetProps<T, S, F>>;
118
  /** Color picker widget */
119
  ColorWidget: ComponentType<WidgetProps<T, S, F>>;
120
  /** Standard date input widget */
121
  DateWidget: ComponentType<WidgetProps<T, S, F>>;
122
  /** Standard datetime input widget */
123
  DateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
124
  /** Email input widget with validation */
125
  EmailWidget: ComponentType<WidgetProps<T, S, F>>;
126
  /** File upload widget */
127
  FileWidget: ComponentType<WidgetProps<T, S, F>>;
128
  /** Hidden input widget */
129
  HiddenWidget: ComponentType<WidgetProps<T, S, F>>;
130
  /** Password input widget */
131
  PasswordWidget: ComponentType<WidgetProps<T, S, F>>;
132
  /** Radio button group widget */
133
  RadioWidget: ComponentType<WidgetProps<T, S, F>>;
134
  /** Range slider widget */
135
  RangeWidget: ComponentType<WidgetProps<T, S, F>>;
136
  /** Dropdown select widget */
137
  SelectWidget: ComponentType<WidgetProps<T, S, F>>;
138
  /** Standard text input widget */
139
  TextWidget: ComponentType<WidgetProps<T, S, F>>;
140
  /** Textarea widget for multiline text */
141
  TextareaWidget: ComponentType<WidgetProps<T, S, F>>;
142
  /** Time input widget */
143
  TimeWidget: ComponentType<WidgetProps<T, S, F>>;
144
  /** Number input with up/down buttons */
145
  UpDownWidget: ComponentType<WidgetProps<T, S, F>>;
146
  /** URL input widget with validation */
147
  URLWidget: ComponentType<WidgetProps<T, S, F>>;
148
}
149
```
150

151
### TemplatesType Interface
152

153
Collection of template components that control form layout and presentation.
154

155
```typescript { .api }
156
interface TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
157
  /** Template for array field descriptions */
158
  ArrayFieldDescriptionTemplate: ComponentType<ArrayFieldDescriptionProps<T, S, F>>;
159
  /** Template for individual array items */
160
  ArrayFieldItemTemplate: ComponentType<ArrayFieldTemplateItemType<T, S, F>>;
161
  /** Template for entire array fields */
162
  ArrayFieldTemplate: ComponentType<ArrayFieldTemplateProps<T, S, F>>;
163
  /** Template for array field titles */
164
  ArrayFieldTitleTemplate: ComponentType<ArrayFieldTitleProps<T, S, F>>;
165
  /** Base template for input widgets */
166
  BaseInputTemplate: ComponentType<BaseInputTemplateProps<T, S, F>>;
167
  /** Template for field descriptions */
168
  DescriptionFieldTemplate: ComponentType<DescriptionFieldProps<T, S, F>>;
169
  /** Template for error list display */
170
  ErrorListTemplate: ComponentType<ErrorListProps<T, S, F>>;
171
  /** Template for individual form fields */
172
  FieldTemplate: ComponentType<FieldTemplateProps<T, S, F>>;
173
  /** Template for field-specific errors */
174
  FieldErrorTemplate: ComponentType<FieldErrorProps<T, S, F>>;
175
  /** Template for field help text */
176
  FieldHelpTemplate: ComponentType<FieldHelpProps<T, S, F>>;
177
  /** Template for object fields */
178
  ObjectFieldTemplate: ComponentType<ObjectFieldTemplateProps<T, S, F>>;
179
  /** Template for field titles */
180
  TitleFieldTemplate: ComponentType<TitleFieldProps<T, S, F>>;
181
  /** Template for unsupported field types */
182
  UnsupportedFieldTemplate: ComponentType<UnsupportedFieldProps<T, S, F>>;
183
  /** Template for additional properties wrapper */
184
  WrapIfAdditionalTemplate: ComponentType<WrapIfAdditionalTemplateProps<T, S, F>>;
185
  /** Collection of button templates */
186
  ButtonTemplates: {
187
    /** Form submit button */
188
    SubmitButton: ComponentType<SubmitButtonProps<T, S, F>>;
189
    /** Add array item button */
190
    AddButton: ComponentType<IconButtonProps<T, S, F>>;
191
    /** Copy array item button */
192
    CopyButton: ComponentType<IconButtonProps<T, S, F>>;
193
    /** Move array item down button */
194
    MoveDownButton: ComponentType<IconButtonProps<T, S, F>>;
195
    /** Move array item up button */
196
    MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
197
    /** Remove array item button */
198
    RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
199
  };
200
}
201
```
202

203
## Registry Usage Patterns
204

205
### Custom Registry Creation
206

207
```typescript
208
import { getDefaultRegistry } from "@rjsf/core";
209

210
// Create custom registry with extended widgets
211
const createCustomRegistry = () => {
212
  const defaultRegistry = getDefaultRegistry();
213
  
214
  return {
215
    ...defaultRegistry,
216
    widgets: {
217
      ...defaultRegistry.widgets,
218
      // Override existing widgets
219
      TextWidget: CustomTextWidget,
220
      SelectWidget: CustomSelectWidget,
221
      // Add new widgets
222
      RichTextWidget: RichTextEditor,
223
      CodeEditorWidget: CodeEditor,
224
    },
225
    templates: {
226
      ...defaultRegistry.templates,
227
      // Override field template
228
      FieldTemplate: CustomFieldTemplate,
229
      // Override error list
230
      ErrorListTemplate: CustomErrorList,
231
      ButtonTemplates: {
232
        ...defaultRegistry.templates.ButtonTemplates,
233
        SubmitButton: CustomSubmitButton,
234
      }
235
    },
236
    fields: {
237
      ...defaultRegistry.fields,
238
      // Add custom field for complex schemas
239
      MultiSelectField: MultiSelectField,
240
    }
241
  };
242
};
243

244
const customRegistry = createCustomRegistry();
245

246
<Form
247
  schema={schema}
248
  validator={validator}
249
  widgets={customRegistry.widgets}
250
  templates={customRegistry.templates}
251
  fields={customRegistry.fields}
252
/>
253
```
254

255
### Widget Registration by Schema Properties
256

257
```typescript
258
// Register widgets based on schema format or custom properties
259
const getWidgetForSchema = (schema, uiSchema) => {
260
  // Use format to determine widget
261
  if (schema.format === 'markdown') return 'MarkdownWidget';
262
  if (schema.format === 'color') return 'ColorWidget';
263
  if (schema.format === 'date') return 'DateWidget';
264
  
265
  // Use custom UI schema properties
266
  if (uiSchema?.['ui:widget']) return uiSchema['ui:widget'];
267
  
268
  // Use enum for select widgets
269
  if (schema.enum) return 'SelectWidget';
270
  
271
  // Default text widget
272
  return 'TextWidget';
273
};
274

275
const customWidgets = {
276
  ...getDefaultRegistry().widgets,
277
  MarkdownWidget: MarkdownEditor,
278
  ColorWidget: ColorPicker,
279
  DateWidget: DatePicker,
280
};
281
```
282

283
### Dynamic Field Registration
284

285
```typescript
286
// Register fields based on schema structure
287
const getDynamicFields = () => {
288
  const fields = getDefaultRegistry().fields;
289
  
290
  return {
291
    ...fields,
292
    // Custom field for objects with specific patterns
293
    AddressField: ({ schema, ...props }) => {
294
      if (schema.properties?.street && schema.properties?.city) {
295
        return <AddressFormField {...props} />;
296
      }
297
      return <fields.ObjectField schema={schema} {...props} />;
298
    },
299
    // Custom field for arrays with specific item types
300
    TagArrayField: ({ schema, ...props }) => {
301
      if (schema.items?.type === 'string' && schema.items?.enum) {
302
        return <TagSelector {...props} />;
303
      }
304
      return <fields.ArrayField schema={schema} {...props} />;
305
    }
306
  };
307
};
308
```
309

310
### Registry with Conditional Components
311

312
```typescript
313
const createConditionalRegistry = (userRole) => {
314
  const defaultRegistry = getDefaultRegistry();
315
  
316
  const adminWidgets = {
317
    AdminSelectWidget: AdminSelect,
318
    DatabaseWidget: DatabaseQuery,
319
  };
320
  
321
  const readOnlyTemplates = {
322
    FieldTemplate: ReadOnlyFieldTemplate,
323
    ObjectFieldTemplate: ReadOnlyObjectTemplate,
324
  };
325
  
326
  return {
327
    ...defaultRegistry,
328
    widgets: {
329
      ...defaultRegistry.widgets,
330
      ...(userRole === 'admin' ? adminWidgets : {}),
331
    },
332
    templates: {
333
      ...defaultRegistry.templates,
334
      ...(userRole === 'viewer' ? readOnlyTemplates : {}),
335
    }
336
  };
337
};
338

339
const registry = createConditionalRegistry(currentUser.role);
340
```
341

342
### Lazy-Loaded Registry Components
343

344
```typescript
345
import { lazy, Suspense } from 'react';
346

347
// Lazy load heavy components
348
const RichTextWidget = lazy(() => import('./widgets/RichTextWidget'));
349
const ChartWidget = lazy(() => import('./widgets/ChartWidget'));
350

351
const createLazyRegistry = () => {
352
  const defaultRegistry = getDefaultRegistry();
353
  
354
  return {
355
    ...defaultRegistry,
356
    widgets: {
357
      ...defaultRegistry.widgets,
358
      RichTextWidget: (props) => (
359
        <Suspense fallback={<div>Loading editor...</div>}>
360
          <RichTextWidget {...props} />
361
        </Suspense>
362
      ),
363
      ChartWidget: (props) => (
364
        <Suspense fallback={<div>Loading chart...</div>}>
365
          <ChartWidget {...props} />
366
        </Suspense>
367
      ),
368
    }
369
  };
370
};
371
```