0
# Field Components
1

2
Field components handle different JSON Schema types and provide the foundation for form rendering. Each field component is responsible for interpreting a specific schema type and rendering the appropriate form structure.
3

4
## Capabilities
5

6
### Field Component Types
7

8
Built-in field components that handle different JSON Schema types and structures.
9

10
```typescript { .api }
11
interface RegistryFieldsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
12
  /** Handles anyOf schema unions allowing multiple possible schemas */
13
  AnyOfField: ComponentType<FieldProps<T, S, F>>;
14
  /** Handles array type schemas with dynamic item management */
15
  ArrayField: ComponentType<FieldProps<T, S, F>>;
16
  /** Handles boolean type schemas with checkbox or select widgets */
17
  BooleanField: ComponentType<FieldProps<T, S, F>>;
18
  /** Handles number and integer type schemas with numeric widgets */
19
  NumberField: ComponentType<FieldProps<T, S, F>>;
20
  /** Handles object type schemas with nested field rendering */
21
  ObjectField: ComponentType<FieldProps<T, S, F>>;
22
  /** Handles oneOf schema unions with radio or select widgets */
23
  OneOfField: ComponentType<FieldProps<T, S, F>>;
24
  /** Root field router that determines which field type to render */
25
  SchemaField: ComponentType<FieldProps<T, S, F>>;
26
  /** Handles string type schemas with various text input widgets */
27
  StringField: ComponentType<FieldProps<T, S, F>>;
28
  /** Handles null type schemas with hidden or disabled widgets */
29
  NullField: ComponentType<FieldProps<T, S, F>>;
30
}
31
```
32

33
### FieldProps Interface
34

35
Common props interface shared by all field components.
36

37
```typescript { .api }
38
interface FieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
39
  /** JSON schema for this field */
40
  schema: S;
41
  /** UI schema for customizing appearance and behavior */
42
  uiSchema: UiSchema<T, S, F>;
43
  /** ID schema for field identification */
44
  idSchema: IdSchema<T>;
45
  /** Current field data value */
46
  formData?: T;
47
  /** Error schema for validation errors */
48
  errorSchema: ErrorSchema<T>;
49
  /** Called when field data changes */
50
  onChange: (newFormData: any, newErrorSchema?: ErrorSchema<T>, id?: string) => void;
51
  /** Called when field loses focus */
52
  onBlur: (id: string, data: any) => void;
53
  /** Called when field gains focus */
54
  onFocus: (id: string, data: any) => void;
55
  /** Registry containing all available components */
56
  registry: Registry<T, S, F>;
57
  /** Form context object */
58
  formContext: F;
59
  /** Whether field should auto-focus */
60
  autofocus?: boolean;
61
  /** Whether field is disabled */
62
  disabled?: boolean;
63
  /** Whether field is read-only */
64
  readonly?: boolean;
65
  /** Whether to hide field-level errors */
66
  hideError?: boolean;
67
  /** Field name */
68
  name: string;
69
}
70
```
71

72
## Field Component Details
73

74
### SchemaField
75

76
Root field component that routes to appropriate field types based on schema.
77

78
```typescript { .api }
79
/**
80
 * Root field router that determines which field component to render
81
 * based on schema type and other properties
82
 */
83
const SchemaField: ComponentType<FieldProps<T, S, F>>;
84
```
85

86
**Schema Routing Logic:**
87

88
```typescript
89
// SchemaField determines field type based on:
90
// 1. UI schema field override: uiSchema["ui:field"]
91
// 2. Custom registry fields by name
92
// 3. Schema type: "string", "number", "object", "array", "boolean", "null"
93
// 4. Schema unions: anyOf, oneOf
94
// 5. Fallback to UnsupportedField
95

96
const schema = { type: "string" }; // -> StringField
97
const schema = { type: "object" }; // -> ObjectField  
98
const schema = { anyOf: [...] }; // -> AnyOfField
99
const schema = { oneOf: [...] }; // -> OneOfField
100
```
101

102
### StringField
103

104
Handles string type schemas with format-specific widget selection.
105

106
```typescript { .api }
107
/**
108
 * Field component for string type schemas
109
 * Automatically selects appropriate widget based on format and enum
110
 */
111
const StringField: ComponentType<FieldProps<T, S, F>>;
112
```
113

114
**Widget Selection Logic:**
115

116
```typescript
117
// StringField selects widgets based on:
118
const stringSchema = {
119
  type: "string",
120
  format: "email"        // -> EmailWidget
121
  // format: "uri"        // -> URLWidget  
122
  // format: "date"       // -> DateWidget
123
  // format: "time"       // -> TimeWidget
124
  // format: "color"      // -> ColorWidget
125
  // enum: ["a", "b"]     // -> SelectWidget
126
  // no format/enum       // -> TextWidget
127
};
128

129
const uiSchema = {
130
  "ui:widget": "textarea"  // -> TextareaWidget (override)
131
};
132
```
133

134
### NumberField
135

136
Handles number and integer type schemas with numeric widgets.
137

138
```typescript { .api }
139
/**
140
 * Field component for number and integer type schemas
141
 * Supports range widgets and up/down controls
142
 */
143
const NumberField: ComponentType<FieldProps<T, S, F>>;
144
```
145

146
**Usage Examples:**
147

148
```typescript
149
// Integer with up/down widget
150
const integerSchema = {
151
  type: "integer",
152
  minimum: 0,
153
  maximum: 100
154
};
155

156
const integerUI = {
157
  "ui:widget": "updown"
158
};
159

160
// Number with range slider
161
const rangeSchema = {
162
  type: "number",
163
  minimum: 0,
164
  maximum: 1,
165
  multipleOf: 0.1
166
};
167

168
const rangeUI = {
169
  "ui:widget": "range"
170
};
171
```
172

173
### ObjectField
174

175
Handles object type schemas with nested property rendering.
176

177
```typescript { .api }
178
/**
179
 * Field component for object type schemas
180
 * Renders nested properties and handles additional properties
181
 */
182
const ObjectField: ComponentType<FieldProps<T, S, F>>;
183
```
184

185
**Features:**
186

187
```typescript
188
// Object with required and optional properties
189
const objectSchema = {
190
  type: "object",
191
  properties: {
192
    firstName: { type: "string", title: "First Name" },
193
    lastName: { type: "string", title: "Last Name" },
194
    age: { type: "number", title: "Age", minimum: 0 }
195
  },
196
  required: ["firstName", "lastName"],
197
  additionalProperties: true  // Allow extra properties
198
};
199

200
// UI schema for property ordering and styling
201
const objectUI = {
202
  "ui:order": ["firstName", "lastName", "age", "*"], // * = additional props
203
  firstName: { "ui:autofocus": true },
204
  age: { "ui:widget": "updown" }
205
};
206
```
207

208
### ArrayField
209

210
Handles array type schemas with dynamic item management.
211

212
```typescript { .api }
213
/**
214
 * Field component for array type schemas
215
 * Provides add, remove, reorder functionality for array items
216
 */
217
const ArrayField: ComponentType<FieldProps<T, S, F>>;
218
```
219

220
**Array Types:**
221

222
```typescript
223
// Fixed items array (tuple)
224
const tupleSchema = {
225
  type: "array",
226
  items: [
227
    { type: "string", title: "Name" },
228
    { type: "number", title: "Age" },
229
    { type: "boolean", title: "Active" }
230
  ]
231
};
232

233
// Variable items array
234
const listSchema = {
235
  type: "array",
236
  items: { type: "string" },
237
  minItems: 1,
238
  maxItems: 10
239
};
240

241
// Array of objects
242
const objectArraySchema = {
243
  type: "array",
244
  items: {
245
    type: "object",
246
    properties: {
247
      name: { type: "string" },
248
      email: { type: "string", format: "email" }
249
    }
250
  }
251
};
252

253
// UI schema for arrays
254
const arrayUI = {
255
  "ui:options": {
256
    addable: true,
257
    removable: true,
258
    orderable: true
259
  },
260
  items: {
261
    name: { "ui:placeholder": "Enter name" }
262
  }
263
};
264
```
265

266
### BooleanField
267

268
Handles boolean type schemas with checkbox or select widgets.
269

270
```typescript { .api }
271
/**
272
 * Field component for boolean type schemas
273
 * Renders checkbox, radio, or select widgets
274
 */
275
const BooleanField: ComponentType<FieldProps<T, S, F>>;
276
```
277

278
**Widget Options:**
279

280
```typescript
281
// Default checkbox
282
const booleanSchema = {
283
  type: "boolean",
284
  title: "Accept Terms"
285
};
286

287
// Radio buttons for boolean
288
const radioUI = {
289
  "ui:widget": "radio",
290
  "ui:options": {
291
    inline: true
292
  }
293
};
294

295
// Select dropdown for boolean
296
const selectUI = {
297
  "ui:widget": "select"
298
};
299
```
300

301
### AnyOfField and OneOfField
302

303
Handle schema unions with multiple possible schemas.
304

305
```typescript { .api }
306
/**
307
 * Field component for anyOf schema unions
308
 * Allows any of the specified schemas to match
309
 */
310
const AnyOfField: ComponentType<FieldProps<T, S, F>>;
311

312
/**
313
 * Field component for oneOf schema unions  
314
 * Requires exactly one of the specified schemas to match
315
 */
316
const OneOfField: ComponentType<FieldProps<T, S, F>>;
317
```
318

319
**Union Schema Examples:**
320

321
```typescript
322
// OneOf - choose one schema
323
const oneOfSchema = {
324
  oneOf: [
325
    {
326
      type: "string",
327
      title: "Text Option"
328
    },
329
    {
330
      type: "number", 
331
      title: "Number Option"
332
    },
333
    {
334
      type: "object",
335
      title: "Object Option",
336
      properties: {
337
        name: { type: "string" },
338
        value: { type: "number" }
339
      }
340
    }
341
  ]
342
};
343

344
// AnyOf - match any schemas
345
const anyOfSchema = {
346
  anyOf: [
347
    { type: "string", minLength: 5 },
348
    { type: "number", minimum: 10 }
349
  ]
350
};
351
```
352

353
### NullField
354

355
Handles null type schemas with hidden or disabled presentation.
356

357
```typescript { .api }
358
/**
359
 * Field component for null type schemas
360
 * Typically renders as hidden input or disabled field
361
 */
362
const NullField: ComponentType<FieldProps<T, S, F>>;
363
```
364

365
## Custom Field Implementation
366

367
### Creating Custom Fields
368

369
```typescript
370
import { FieldProps } from "@rjsf/utils";
371

372
const CustomDateRangeField = (props: FieldProps) => {
373
  const { schema, formData, onChange, registry } = props;
374
  
375
  // Custom field logic for date range
376
  const handleStartDateChange = (startDate: string) => {
377
    onChange({
378
      ...formData,
379
      startDate
380
    });
381
  };
382
  
383
  const handleEndDateChange = (endDate: string) => {
384
    onChange({
385
      ...formData,
386
      endDate
387
    });
388
  };
389
  
390
  return (
391
    <div className="date-range-field">
392
      <label>Start Date</label>
393
      <input 
394
        type="date" 
395
        value={formData?.startDate || ''} 
396
        onChange={(e) => handleStartDateChange(e.target.value)}
397
      />
398
      
399
      <label>End Date</label>
400
      <input 
401
        type="date" 
402
        value={formData?.endDate || ''} 
403
        onChange={(e) => handleEndDateChange(e.target.value)}
404
      />
405
    </div>
406
  );
407
};
408

409
// Register custom field
410
const customFields = {
411
  DateRangeField: CustomDateRangeField
412
};
413

414
// Use in schema
415
const schema = {
416
  type: "object",
417
  properties: {
418
    dateRange: {
419
      type: "object",
420
      title: "Date Range"
421
    }
422
  }
423
};
424

425
const uiSchema = {
426
  dateRange: {
427
    "ui:field": "DateRangeField"
428
  }
429
};
430

431
<Form
432
  schema={schema}
433
  uiSchema={uiSchema}
434
  fields={customFields}
435
  validator={validator}
436
/>
437
```
438

439
### Conditional Field Rendering
440

441
```typescript
442
const ConditionalField = (props: FieldProps) => {
443
  const { schema, formData, registry, uiSchema } = props;
444
  const { fields } = registry;
445
  
446
  // Show different fields based on condition
447
  if (formData?.type === 'advanced') {
448
    return <fields.ObjectField {...props} />;
449
  } else {
450
    return <fields.StringField {...props} />;
451
  }
452
};
453
```