0
# Fields
1

2
Custom field components for specific rendering needs like titles and descriptions. Fields handle the display of metadata and structural elements within forms.
3

4
## Capabilities
5

6
### DescriptionField
7

8
Displays field description text using Material UI Typography component with consistent styling.
9

10
```typescript { .api }
11
/**
12
 * Displays field description using Typography component with subtitle2 variant
13
 * @param props - FieldProps containing description and schema information
14
 * @returns JSX.Element
15
 */
16
declare const DescriptionField: React.ComponentType<FieldProps>;
17
```
18

19
**Features:**
20
- Uses Typography with subtitle2 variant for consistent text styling
21
- Integrates with Material UI theme typography scale
22
- Handles rich text descriptions when provided
23
- Responsive text sizing
24

25
**Usage:**
26
- Automatically rendered when schema contains `description` property
27
- Can be customized through theme configuration
28

29
**Example:**
30
```typescript
31
const schema = {
32
  type: "object",
33
  description: "Please fill out your personal information below.",
34
  properties: {
35
    name: { type: "string", title: "Full Name" }
36
  }
37
};
38

39
// Description will be automatically rendered above the form fields
40
```
41

42
### TitleField
43

44
Displays field title text using Material UI Typography h5 variant with an optional divider for visual separation.
45

46
```typescript { .api }
47
/**
48
 * Displays field title using Typography h5 variant with Divider
49
 * @param props - FieldProps containing title and schema information
50
 * @returns JSX.Element
51
 */
52
declare const TitleField: React.ComponentType<FieldProps>;
53
```
54

55
**Features:**
56
- Uses Typography h5 variant for prominent title display
57
- Includes Divider component for visual separation
58
- Integrates with Material UI theme typography and color system
59
- Handles nested object titles and form section headers
60

61
**Usage:**
62
- Automatically rendered when schema contains `title` property
63
- Used for form titles and section headers
64
- Can be styled through Material UI theme
65

66
**Example:**
67
```typescript
68
const schema = {
69
  type: "object",
70
  title: "User Registration Form",
71
  properties: {
72
    personalInfo: {
73
      type: "object",
74
      title: "Personal Information",
75
      properties: {
76
        name: { type: "string" },
77
        email: { type: "string" }
78
      }
79
    }
80
  }
81
};
82

83
// Will render "User Registration Form" as main title
84
// and "Personal Information" as section title
85
```
86

87
## Field Props
88

89
All field components receive the FieldProps interface:
90

91
```typescript { .api }
92
interface FieldProps {
93
  /** Field name/key */
94
  name: string;
95
  /** Field title text */
96
  title?: string;
97
  /** Field description text */
98
  description?: string;
99
  /** Field properties for object types */
100
  properties?: { [key: string]: any };
101
  /** JSON Schema for this field */
102
  schema: JSONSchema7;
103
  /** UI Schema for this field */
104
  uiSchema?: UiSchema;
105
  /** Current form data for this field */
106
  formData?: any;
107
  /** Form context object */
108
  formContext?: any;
109
  /** Field identifier schema */
110
  idSchema?: IdSchema;
111
  /** Whether field is required */
112
  required?: boolean;
113
  /** Whether field is disabled */
114
  disabled?: boolean;
115
  /** Whether field is readonly */
116
  readonly?: boolean;
117
  /** Whether field is hidden */
118
  hidden?: boolean;
119
  /** Change handler */
120
  onChange?: (value: any) => void;
121
  /** Blur handler */
122
  onBlur?: (id: string, value: any) => void;
123
  /** Focus handler */
124
  onFocus?: (id: string, value: any) => void;
125
  /** Validation errors */
126
  rawErrors?: string[];
127
  /** Error schema */
128
  errorSchema?: ErrorSchema;
129
  /** Form registry */
130
  registry?: Registry;
131
}
132
```
133

134
## Field Collection Export
135

136
Both fields are available as a collection:
137

138
```typescript { .api }
139
interface FieldCollection {
140
  DescriptionField: React.ComponentType<FieldProps>;
141
  TitleField: React.ComponentType<FieldProps>;
142
}
143

144
declare const Fields: FieldCollection;
145
```
146

147
## Usage Examples
148

149
### Custom Field Integration
150

151
```typescript
152
import { Fields } from "@rjsf/material-ui/v5";
153
import Form from "@rjsf/material-ui/v5";
154

155
const customFields = {
156
  ...Fields,
157
  CustomHeaderField: ({ title }) => (
158
    <div style={{ 
159
      backgroundColor: '#f5f5f5', 
160
      padding: '16px',
161
      borderRadius: '4px' 
162
    }}>
163
      <h2>{title}</h2>
164
    </div>
165
  ),
166
};
167

168
function FormWithCustomFields() {
169
  return (
170
    <Form
171
      schema={schema}
172
      fields={customFields}
173
      uiSchema={{
174
        "ui:field": "CustomHeaderField"
175
      }}
176
    />
177
  );
178
}
179
```
180

181
### Field Styling with Material UI Theme
182

183
```typescript
184
import { createTheme, ThemeProvider } from "@mui/material/styles";
185
import Form from "@rjsf/material-ui/v5";
186

187
const theme = createTheme({
188
  typography: {
189
    h5: {
190
      color: '#1976d2',
191
      fontWeight: 600,
192
    },
193
    subtitle2: {
194
      color: '#666',
195
      fontStyle: 'italic',
196
    },
197
  },
198
});
199

200
function ThemedForm() {
201
  return (
202
    <ThemeProvider theme={theme}>
203
      <Form schema={schema} />
204
    </ThemeProvider>
205
  );
206
}
207
```
208

209
### Conditional Field Display
210

211
```typescript
212
const ConditionalDescriptionField = (props: FieldProps) => {
213
  const { formContext, description } = props;
214
  
215
  // Only show description in verbose mode
216
  if (!formContext?.verbose) {
217
    return null;
218
  }
219
  
220
  return <Fields.DescriptionField {...props} />;
221
};
222

223
const customFields = {
224
  ...Fields,
225
  DescriptionField: ConditionalDescriptionField,
226
};
227

228
function ConditionalForm() {
229
  return (
230
    <Form
231
      schema={schema}
232
      fields={customFields}
233
      formContext={{ verbose: true }}
234
    />
235
  );
236
}
237
```
238

239
### Rich Text Description Field
240

241
```typescript
242
import { Typography } from "@mui/material";
243
import { FieldProps } from "@rjsf/core";
244

245
const RichDescriptionField: React.FC<FieldProps> = ({ description }) => {
246
  if (!description) return null;
247

248
  return (
249
    <Typography 
250
      variant="body2" 
251
      color="textSecondary"
252
      sx={{ 
253
        mb: 2,
254
        p: 2,
255
        backgroundColor: 'grey.50',
256
        borderRadius: 1,
257
        border: '1px solid',
258
        borderColor: 'grey.300'
259
      }}
260
      dangerouslySetInnerHTML={{ __html: description }}
261
    />
262
  );
263
};
264

265
const customFields = {
266
  ...Fields,
267
  DescriptionField: RichDescriptionField,
268
};
269
```
270

271
## Material UI Integration
272

273
Both field components integrate deeply with Material UI:
274

275
- **Typography**: Uses Material UI typography system for consistent text styling
276
- **Theme Integration**: Respects Material UI theme colors, fonts, and spacing
277
- **Responsive Design**: Adapts to different screen sizes using Material UI breakpoints
278
- **Accessibility**: Includes proper ARIA attributes and semantic HTML structure
279
- **Customization**: Can be styled through Material UI theme overrides
280

281
The fields automatically inherit Material UI theme properties and respond to theme changes, ensuring consistent appearance across your application.