0
# Field Templates
1

2
Templates that control the layout and structure of form fields, providing consistent Material UI styling and behavior. Templates wrap widgets and handle common concerns like labels, help text, and error display.
3

4
## Capabilities
5

6
### FieldTemplate
7

8
Template for individual form fields that wraps widgets with Material UI FormControl and handles labels, help text, and error states.
9

10
```typescript { .api }
11
/**
12
 * Wrapper template for individual fields with FormControl, error display, and help text
13
 * @param props - FieldTemplateProps containing field metadata and widget
14
 * @returns JSX.Element
15
 */
16
declare const FieldTemplate: React.ComponentType<FieldTemplateProps>;
17
```
18

19
**Features:**
20
- FormControl wrapper for consistent styling
21
- Label handling with required field indicators
22
- Error message display using FormHelperText
23
- Help text display from schema descriptions
24
- Material UI theme integration
25

26
**Usage:**
27
- Automatically applied to all fields in forms using this theme
28
- Customizable via theme configuration
29

30
### ArrayFieldTemplate
31

32
Template for array fields that provides add/remove/reorder controls with Material UI components.
33

34
```typescript { .api }
35
/**
36
 * Template for array fields with add/remove/reorder controls using Paper, Grid, and IconButton
37
 * @param props - ArrayFieldTemplateProps containing array items and handlers
38
 * @returns JSX.Element
39
 */
40
declare const ArrayFieldTemplate: React.ComponentType<ArrayFieldTemplateProps>;
41
```
42

43
**Features:**
44
- Paper wrapper for visual grouping
45
- Grid layout for array items
46
- Add button with AddIcon
47
- Remove buttons with RemoveIcon for each item
48
- Drag handles for reordering (ArrowUpwardIcon, ArrowDownwardIcon)
49
- Title and description display
50

51
**Usage:**
52
- Automatically applied to array type fields
53
- Supports reorderable arrays with drag controls
54

55
### ObjectFieldTemplate
56

57
Template for object fields that arranges properties in a responsive Grid layout.
58

59
```typescript { .api }
60
/**
61
 * Template for object fields using Grid layout for properties
62
 * @param props - ObjectFieldTemplateProps containing object properties
63
 * @returns JSX.Element
64
 */
65
declare const ObjectFieldTemplate: React.ComponentType<ObjectFieldTemplateProps>;
66
```
67

68
**Features:**
69
- Grid container for responsive layout
70
- Individual Grid items for each property
71
- Handles nested objects and complex structures
72
- Title and description display
73

74
**Usage:**
75
- Automatically applied to object type fields
76
- Responsive layout adapts to screen size
77

78
## Template Props
79

80
### FieldTemplateProps
81

82
```typescript { .api }
83
interface FieldTemplateProps {
84
  /** Unique field identifier */
85
  id: string;
86
  /** Field class name */
87
  classNames: string;
88
  /** Field label text */
89
  label?: string;
90
  /** Field description/help text */
91
  description?: React.ReactElement;
92
  /** Form validation errors for this field */
93
  errors?: React.ReactElement;
94
  /** Help text element */
95
  help?: React.ReactElement;
96
  /** Whether field is required */
97
  required?: boolean;
98
  /** Whether field is hidden */
99
  hidden?: boolean;
100
  /** Whether field is readonly */
101
  readonly?: boolean;
102
  /** Whether field is disabled */
103
  disabled?: boolean;
104
  /** The rendered widget component */
105
  children: React.ReactElement;
106
  /** Field schema */
107
  schema: JSONSchema7;
108
  /** Field UI schema */
109
  uiSchema?: UiSchema;
110
  /** Form context */
111
  formContext?: any;
112
  /** Raw validation errors */
113
  rawErrors?: string[];
114
  /** Display label flag */
115
  displayLabel?: boolean;
116
}
117
```
118

119
### ArrayFieldTemplateProps
120

121
```typescript { .api }
122
interface ArrayFieldTemplateProps {
123
  /** Whether the array can be reordered */
124
  canAdd?: boolean;
125
  /** Array class name */
126
  className?: string;
127
  /** Whether items are disabled */
128
  disabled?: boolean;
129
  /** Form context */
130
  formContext?: any;
131
  /** Field identifier prefix */
132
  idSchema: IdSchema;
133
  /** Array items */
134
  items: ArrayFieldTemplateItemType[];
135
  /** Add button handler */
136
  onAddClick: (event?: any) => void;
137
  /** Whether array is readonly */
138
  readonly?: boolean;
139
  /** Required fields */
140
  required?: boolean;
141
  /** Field schema */
142
  schema: JSONSchema7;
143
  /** Array title */
144
  title?: string;
145
  /** UI schema */
146
  uiSchema?: UiSchema;
147
  /** Form registry */
148
  registry: Registry;
149
}
150

151
interface ArrayFieldTemplateItemType {
152
  /** Item content element */
153
  children: React.ReactElement;
154
  /** Item class name */
155
  className?: string;
156
  /** Whether item is disabled */
157
  disabled?: boolean;
158
  /** Whether remove button should be shown */
159
  hasRemove?: boolean;
160
  /** Whether move up button should be shown */
161
  hasMoveUp?: boolean;
162
  /** Whether move down button should be shown */
163
  hasMoveDown?: boolean;
164
  /** Item index */
165
  index: number;
166
  /** Remove button click handler */
167
  onDropIndexClick: (index: number) => (event?: any) => void;
168
  /** Move up button click handler */
169
  onReorderClick: (index: number, newIndex: number) => (event?: any) => void;
170
  /** Whether item is readonly */
171
  readonly?: boolean;
172
  /** Item key */
173
  key: string;
174
}
175
```
176

177
### ObjectFieldTemplateProps
178

179
```typescript { .api }
180
interface ObjectFieldTemplateProps {
181
  /** Field description element */
182
  description?: React.ReactElement;
183
  /** Whether object is disabled */
184
  disabled?: boolean;
185
  /** Form context */
186
  formContext?: any;
187
  /** Field identifier schema */
188
  idSchema: IdSchema;
189
  /** Object properties */
190
  properties: ObjectFieldTemplatePropertyType[];
191
  /** Whether object is readonly */
192
  readonly?: boolean;
193
  /** Whether object is required */
194
  required?: boolean;
195
  /** Field schema */
196
  schema: JSONSchema7;
197
  /** Object title */
198
  title?: string;
199
  /** UI schema */
200
  uiSchema?: UiSchema;
201
  /** Form registry */
202
  registry: Registry;
203
}
204

205
interface ObjectFieldTemplatePropertyType {
206
  /** Property content element */
207
  content: React.ReactElement;
208
  /** Property name */
209
  name: string;
210
  /** Whether property is readonly */
211
  readonly?: boolean;
212
  /** Whether property is disabled */
213
  disabled?: boolean;
214
  /** Whether property is required */
215
  required?: boolean;
216
  /** Whether property is hidden */
217
  hidden?: boolean;
218
}
219
```
220

221
## Customization Examples
222

223
### Custom Field Template
224

225
```typescript
226
import { FieldTemplateProps } from "@rjsf/core";
227
import { FormControl, FormLabel, FormHelperText } from "@mui/material";
228

229
const CustomFieldTemplate: React.FC<FieldTemplateProps> = ({
230
  id,
231
  classNames,
232
  label,
233
  help,
234
  required,
235
  description,
236
  errors,
237
  children,
238
  hidden,
239
}) => {
240
  if (hidden) return <div style={{ display: "none" }}>{children}</div>;
241

242
  return (
243
    <FormControl fullWidth className={classNames} margin="normal">
244
      {label && (
245
        <FormLabel htmlFor={id} required={required}>
246
          {label}
247
        </FormLabel>
248
      )}
249
      {description}
250
      {children}
251
      {errors}
252
      {help && <FormHelperText>{help}</FormHelperText>}
253
    </FormControl>
254
  );
255
};
256
```
257

258
### Custom Array Template
259

260
```typescript
261
import { ArrayFieldTemplateProps } from "@rjsf/core";
262
import { Paper, Box, Button, IconButton } from "@mui/material";
263
import { Add as AddIcon, Delete as DeleteIcon } from "@mui/icons-material";
264

265
const CustomArrayTemplate: React.FC<ArrayFieldTemplateProps> = ({
266
  items,
267
  onAddClick,
268
  canAdd,
269
  title,
270
  schema,
271
}) => {
272
  return (
273
    <Paper elevation={2} sx={{ p: 2 }}>
274
      {title && <h3>{title}</h3>}
275
      {items.map((item) => (
276
        <Box key={item.key} sx={{ mb: 2, display: "flex", alignItems: "center" }}>
277
          <Box sx={{ flexGrow: 1 }}>{item.children}</Box>
278
          {item.hasRemove && (
279
            <IconButton onClick={item.onDropIndexClick(item.index)}>
280
              <DeleteIcon />
281
            </IconButton>
282
          )}
283
        </Box>
284
      ))}
285
      {canAdd && (
286
        <Button startIcon={<AddIcon />} onClick={onAddClick}>
287
          Add Item
288
        </Button>
289
      )}
290
    </Paper>
291
  );
292
};
293
```
294

295
### Using Custom Templates
296

297
```typescript
298
import Form from "@rjsf/material-ui/v5";
299

300
function FormWithCustomTemplates() {
301
  return (
302
    <Form
303
      schema={schema}
304
      FieldTemplate={CustomFieldTemplate}
305
      ArrayFieldTemplate={CustomArrayTemplate}
306
      ObjectFieldTemplate={CustomObjectTemplate}
307
    />
308
  );
309
}
310
```
311

312
### Template Override in Theme
313

314
```typescript
315
import { withTheme } from "@rjsf/core";
316
import { Theme } from "@rjsf/material-ui/v5";
317

318
const customTheme = {
319
  ...Theme,
320
  FieldTemplate: CustomFieldTemplate,
321
  ArrayFieldTemplate: CustomArrayTemplate,
322
};
323

324
const CustomForm = withTheme(customTheme);
325
```
326

327
## Material UI Integration
328

329
All templates use Material UI components and follow Material Design principles:
330

331
- **FormControl**: Provides consistent form field structure
332
- **Paper**: Creates visual containers for complex fields
333
- **Grid**: Ensures responsive layouts
334
- **IconButton**: Provides accessible action buttons
335
- **Typography**: Handles text styling and hierarchy
336
- **FormHelperText**: Displays help text and errors consistently
337

338
The templates automatically adapt to Material UI theme changes and respect Material Design spacing, colors, and typography scales.