0
# Form Components
1

2
Pre-configured form components with Material UI themes and all necessary widgets, fields, and templates for creating JSON schema-based forms.
3

4
## Capabilities
5

6
### MuiForm (Default)
7

8
The default form component with Material UI v4 styling and theme configuration.
9

10
```typescript { .api }
11
/**
12
 * Default Material UI v4 form component created with withTheme(Theme)
13
 * @param props - Standard FormProps from @rjsf/core
14
 * @returns JSX.Element
15
 */
16
declare const MuiForm: React.ComponentType<FormProps<any>>;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import Form from "@rjsf/material-ui";
23

24
const schema = {
25
  type: "object",
26
  properties: {
27
    title: { type: "string", title: "Title" },
28
    description: { type: "string", title: "Description" }
29
  }
30
};
31

32
function MyForm() {
33
  return (
34
    <Form
35
      schema={schema}
36
      formData={{ title: "Hello", description: "World" }}
37
      onSubmit={({formData}) => console.log("Data:", formData)}
38
    />
39
  );
40
}
41
```
42

43
### MuiForm4
44

45
Explicit Material UI v4 form component (alias for MuiForm).
46

47
```typescript { .api }
48
/**
49
 * Explicit Material UI v4 form component
50
 * @param props - Standard FormProps from @rjsf/core
51
 * @returns JSX.Element
52
 */
53
declare const MuiForm4: React.ComponentType<FormProps<any>>;
54
```
55

56
**Usage Example:**
57

58
```typescript
59
import { MuiForm4 } from "@rjsf/material-ui";
60
// or
61
import Form from "@rjsf/material-ui/v4";
62
```
63

64
### MuiForm5
65

66
Material UI v5 form component with @mui/material theme integration.
67

68
```typescript { .api }
69
/**
70
 * Material UI v5 form component created with withTheme(Theme5)
71
 * @param props - Standard FormProps from @rjsf/core
72
 * @returns JSX.Element
73
 */
74
declare const MuiForm5: React.ComponentType<FormProps<any>>;
75
```
76

77
**Usage Example:**
78

79
```typescript
80
import { MuiForm5 } from "@rjsf/material-ui";
81
// or
82
import Form from "@rjsf/material-ui/v5";
83

84
function MyForm() {
85
  return (
86
    <Form
87
      schema={schema}
88
      formData={formData}
89
      onSubmit={handleSubmit}
90
      onError={handleError}
91
    />
92
  );
93
}
94
```
95

96
## Form Props
97

98
All form components accept the standard FormProps from @rjsf/core:
99

100
```typescript { .api }
101
interface FormProps<T = any> {
102
  /** JSON Schema defining the form structure */
103
  schema: JSONSchema7;
104
  /** Current form data */
105
  formData?: T;
106
  /** UI Schema for customizing form appearance */
107
  uiSchema?: UiSchema;
108
  /** Custom error list component */
109
  ErrorList?: React.ComponentType<ErrorListProps>;
110
  /** Custom fields for the form */
111
  fields?: { [name: string]: Field };
112
  /** Custom widgets for the form */
113
  widgets?: { [name: string]: Widget };
114
  /** Array field template */
115
  ArrayFieldTemplate?: React.ComponentType<ArrayFieldTemplateProps>;
116
  /** Object field template */
117
  ObjectFieldTemplate?: React.ComponentType<ObjectFieldTemplateProps>;
118
  /** Field template */
119
  FieldTemplate?: React.ComponentType<FieldTemplateProps>;
120
  /** Submit handler */
121
  onSubmit?: (data: ISubmitEvent<T>, nativeEvent: React.FormEvent<HTMLFormElement>) => void;
122
  /** Change handler */
123
  onChange?: (data: IChangeEvent<T>, id?: string) => void;
124
  /** Error handler */
125
  onError?: (errors: AjvError[]) => void;
126
  /** Blur handler */
127
  onBlur?: (id: string, data: T) => void;
128
  /** Focus handler */
129
  onFocus?: (id: string, data: T) => void;
130
  /** Whether to show error list */
131
  showErrorList?: boolean;
132
  /** Whether to live validate */
133
  liveValidate?: boolean;
134
  /** Validation AJV options */
135
  validate?: ValidateFunction<T>;
136
  /** Whether form is disabled */
137
  disabled?: boolean;
138
  /** Whether form is readonly */
139
  readonly?: boolean;
140
  /** Whether to omit extra data */
141
  omitExtraData?: boolean;
142
  /** Whether to live omit extra data */
143
  liveOmit?: boolean;
144
  /** Custom validate function */
145
  customValidate?: CustomValidator<T>;
146
  /** Custom form context */
147
  formContext?: any;
148
  /** Custom transform errors function */
149
  transformErrors?: ErrorTransformer;
150
  /** ID prefix for form elements */
151
  idPrefix?: string;
152
  /** Whether to autofocus first field */
153
  autoComplete?: string;
154
  /** HTML form attributes */
155
  id?: string;
156
  className?: string;
157
  name?: string;
158
  method?: string;
159
  target?: string;
160
  action?: string;
161
  autoComplete?: string;
162
  encType?: string;
163
  acceptCharset?: string;
164
  noValidate?: boolean;
165
  /** Custom submit button */
166
  children?: React.ReactNode;
167
}
168
```
169

170
## Integration Examples
171

172
### With Custom Validation
173

174
```typescript
175
import Form from "@rjsf/material-ui/v5";
176
import { CustomValidator } from "@rjsf/core";
177

178
const customValidate: CustomValidator = (formData, errors) => {
179
  if (formData.password !== formData.confirmPassword) {
180
    errors.confirmPassword.addError("Passwords don't match");
181
  }
182
  return errors;
183
};
184

185
function ValidatedForm() {
186
  return (
187
    <Form
188
      schema={schema}
189
      customValidate={customValidate}
190
      showErrorList={true}
191
      liveValidate={true}
192
    />
193
  );
194
}
195
```
196

197
### With Custom Widgets
198

199
```typescript
200
import Form from "@rjsf/material-ui/v5";
201
import { Slider } from "@mui/material";
202

203
const RangeWidget = (props: WidgetProps) => (
204
  <Slider
205
    value={props.value || 0}
206
    onChange={(_, value) => props.onChange(value)}
207
    min={props.schema.minimum || 0}
208
    max={props.schema.maximum || 100}
209
  />
210
);
211

212
const customWidgets = {
213
  RangeWidget: RangeWidget,
214
};
215

216
function CustomForm() {
217
  return (
218
    <Form
219
      schema={schema}
220
      widgets={customWidgets}
221
      uiSchema={{
222
        slider: { "ui:widget": "RangeWidget" }
223
      }}
224
    />
225
  );
226
}
227
```
228

229
### With Form Context
230

231
```typescript
232
import Form from "@rjsf/material-ui/v5";
233

234
const formContext = {
235
  theme: "dark",
236
  user: { id: 1, name: "John" }
237
};
238

239
function ContextualForm() {
240
  return (
241
    <Form
242
      schema={schema}
243
      formContext={formContext}
244
    />
245
  );
246
}
247
```