0
# Widgets
1

2
Complete set of form input widgets styled with Material UI components for different data types and input methods. All widgets implement the WidgetProps interface from @rjsf/core.
3

4
## Capabilities
5

6
### Text Input Widgets
7

8
#### TextWidget
9

10
Basic text input widget using Material UI TextField component.
11

12
```typescript { .api }
13
/**
14
 * Text input widget using TextField component with support for different input types
15
 * @param props - WidgetProps with text input specific options
16
 * @returns JSX.Element
17
 */
18
declare const TextWidget: React.ComponentType<WidgetProps>;
19
```
20

21
**Usage:**
22
- JSON Schema type: `"string"`
23
- Supports: text, number, password, email, url input types via `inputType` option
24
- Material UI components: TextField
25

26
#### TextareaWidget
27

28
Multi-line text input widget for longer text content.
29

30
```typescript { .api }
31
/**
32
 * Multi-line text input widget using TextField with multiline prop
33
 * @param props - WidgetProps with textarea specific options (rows, etc.)
34
 * @returns JSX.Element
35
 */
36
declare const TextareaWidget: React.ComponentType<WidgetProps>;
37
```
38

39
**Usage:**
40
- JSON Schema type: `"string"` with `ui:widget: "textarea"`
41
- Material UI components: TextField with multiline=true
42

43
#### PasswordWidget
44

45
Password input widget with hidden text display.
46

47
```typescript { .api }
48
/**
49
 * Password input widget with hidden text using TextField type="password"
50
 * @param props - WidgetProps for password input
51
 * @returns JSX.Element
52
 */
53
declare const PasswordWidget: React.ComponentType<WidgetProps>;
54
```
55

56
**Usage:**
57
- JSON Schema type: `"string"` with `format: "password"`
58
- Material UI components: TextField with type="password"
59

60
#### EmailWidget
61

62
Email input widget with built-in validation.
63

64
```typescript { .api }
65
/**
66
 * Email input widget with validation using TextField type="email"
67
 * @param props - WidgetProps for email input
68
 * @returns JSX.Element
69
 */
70
declare const EmailWidget: React.ComponentType<WidgetProps>;
71
```
72

73
**Usage:**
74
- JSON Schema type: `"string"` with `format: "email"`
75
- Material UI components: TextField with type="email"
76

77
#### URLWidget
78

79
URL input widget with validation for web addresses.
80

81
```typescript { .api }
82
/**
83
 * URL input widget with validation using TextField type="url"
84
 * @param props - WidgetProps for URL input
85
 * @returns JSX.Element
86
 */
87
declare const URLWidget: React.ComponentType<WidgetProps>;
88
```
89

90
**Usage:**
91
- JSON Schema type: `"string"` with `format: "uri"`
92
- Material UI components: TextField with type="url"
93

94
### Selection Widgets
95

96
#### SelectWidget
97

98
Dropdown selection widget for choosing from predefined options.
99

100
```typescript { .api }
101
/**
102
 * Dropdown select input using TextField with select prop and MenuItem options
103
 * @param props - WidgetProps with enum options or oneOf schema
104
 * @returns JSX.Element
105
 */
106
declare const SelectWidget: React.ComponentType<WidgetProps>;
107
```
108

109
**Usage:**
110
- JSON Schema: `enum` property or `oneOf` with title/const pairs
111
- Material UI components: TextField (select=true), MenuItem
112

113
**Example:**
114
```typescript
115
const schema = {
116
  type: "string",
117
  enum: ["option1", "option2", "option3"],
118
  enumNames: ["Option 1", "Option 2", "Option 3"]
119
};
120
```
121

122
#### RadioWidget
123

124
Radio button group for single selection from multiple options.
125

126
```typescript { .api }
127
/**
128
 * Radio button group using RadioGroup and FormControlLabel components
129
 * @param props - WidgetProps with enum options
130
 * @returns JSX.Element
131
 */
132
declare const RadioWidget: React.ComponentType<WidgetProps>;
133
```
134

135
**Usage:**
136
- JSON Schema: `enum` with `ui:widget: "radio"`
137
- Material UI components: FormControl, FormLabel, RadioGroup, FormControlLabel, Radio
138

139
#### CheckboxWidget
140

141
Single checkbox for boolean values.
142

143
```typescript { .api }
144
/**
145
 * Single checkbox input using Checkbox and FormControlLabel
146
 * @param props - WidgetProps for boolean input
147
 * @returns JSX.Element
148
 */
149
declare const CheckboxWidget: React.ComponentType<WidgetProps>;
150
```
151

152
**Usage:**
153
- JSON Schema type: `"boolean"`
154
- Material UI components: FormControlLabel, Checkbox
155

156
#### CheckboxesWidget
157

158
Multiple checkbox selection for array values.
159

160
```typescript { .api }
161
/**
162
 * Multiple checkbox selection using FormGroup with Checkbox controls
163
 * @param props - WidgetProps with enum options for array type
164
 * @returns JSX.Element
165
 */
166
declare const CheckboxesWidget: React.ComponentType<WidgetProps>;
167
```
168

169
**Usage:**
170
- JSON Schema type: `"array"` with `items.enum` and `uniqueItems: true`
171
- Material UI components: FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox
172

173
### Date and Time Widgets
174

175
#### DateWidget
176

177
Date input widget for date selection.
178

179
```typescript { .api }
180
/**
181
 * Date input widget using TextField with type="date"
182
 * @param props - WidgetProps for date input
183
 * @returns JSX.Element
184
 */
185
declare const DateWidget: React.ComponentType<WidgetProps>;
186
```
187

188
**Usage:**
189
- JSON Schema type: `"string"` with `format: "date"`
190
- Material UI components: TextField with type="date"
191

192
#### DateTimeWidget
193

194
Date and time input widget for datetime selection.
195

196
```typescript { .api }
197
/**
198
 * Date and time input widget using TextField with type="datetime-local"
199
 * @param props - WidgetProps for datetime input
200
 * @returns JSX.Element
201
 */
202
declare const DateTimeWidget: React.ComponentType<WidgetProps>;
203
```
204

205
**Usage:**
206
- JSON Schema type: `"string"` with `format: "date-time"`
207
- Material UI components: TextField with type="datetime-local"
208

209
### Numeric Widgets
210

211
#### UpDownWidget
212

213
Numeric input with up/down controls for integer values.
214

215
```typescript { .api }
216
/**
217
 * Numeric input with up/down controls using TextField type="number"
218
 * @param props - WidgetProps for integer input
219
 * @returns JSX.Element
220
 */
221
declare const UpDownWidget: React.ComponentType<WidgetProps>;
222
```
223

224
**Usage:**
225
- JSON Schema type: `"integer"`
226
- Material UI components: TextField with type="number"
227

228
#### RangeWidget
229

230
Range slider widget for numeric values within a specific range.
231

232
```typescript { .api }
233
/**
234
 * Range slider input using Material UI Slider component
235
 * @param props - WidgetProps with minimum/maximum values
236
 * @returns JSX.Element
237
 */
238
declare const RangeWidget: React.ComponentType<WidgetProps>;
239
```
240

241
**Usage:**
242
- JSON Schema type: `"integer"` or `"number"` with `ui:widget: "range"`
243
- Supports: `minimum`, `maximum`, `multipleOf` schema properties
244
- Material UI components: FormControl, FormLabel, Slider
245

246
### Other Widgets
247

248
#### ColorWidget
249

250
Color picker widget for color selection.
251

252
```typescript { .api }
253
/**
254
 * Color picker widget using TextField with type="color"
255
 * @param props - WidgetProps for color input
256
 * @returns JSX.Element
257
 */
258
declare const ColorWidget: React.ComponentType<WidgetProps>;
259
```
260

261
**Usage:**
262
- JSON Schema type: `"string"` with `format: "color"`
263
- Material UI components: TextField with type="color"
264

265
#### SubmitButton
266

267
Form submit button with Material UI styling.
268

269
```typescript { .api }
270
/**
271
 * Form submit button using Material UI Button component
272
 * @param props - WidgetProps for submit button
273
 * @returns JSX.Element
274
 */
275
declare const SubmitButton: React.ComponentType<WidgetProps>;
276
```
277

278
**Usage:**
279
- Automatically included in forms
280
- Material UI components: Button with type="submit"
281

282
## Widget Props
283

284
All widgets receive the WidgetProps interface:
285

286
```typescript { .api }
287
interface WidgetProps {
288
  /** Unique identifier for the widget */
289
  id: string;
290
  /** Current value of the widget */
291
  value: any;
292
  /** Display label for the widget */
293
  label?: string;
294
  /** Change handler called when value changes */
295
  onChange: (value: any) => void;
296
  /** Blur handler called when widget loses focus */
297
  onBlur?: (id: string, value: any) => void;
298
  /** Focus handler called when widget gains focus */
299
  onFocus?: (id: string, value: any) => void;
300
  /** Widget-specific options from UI schema */
301
  options?: { [key: string]: any };
302
  /** JSON Schema for this field */
303
  schema: JSONSchema7;
304
  /** UI Schema for this field */
305
  uiSchema?: UiSchema;
306
  /** Whether the widget is readonly */
307
  readonly?: boolean;
308
  /** Whether the widget is disabled */
309
  disabled?: boolean;
310
  /** Whether the field is required */
311
  required?: boolean;
312
  /** Whether multiple values are allowed */
313
  multiple?: boolean;
314
  /** Array of validation error messages */
315
  rawErrors?: string[];
316
  /** Form context object */
317
  formContext?: any;
318
  /** Whether the widget should autofocus */
319
  autofocus?: boolean;
320
  /** Placeholder text for the widget */
321
  placeholder?: string;
322
}
323
```
324

325
## Widget Collection Export
326

327
All widgets are available as a collection:
328

329
```typescript { .api }
330
interface WidgetCollection {
331
  CheckboxWidget: React.ComponentType<WidgetProps>;
332
  CheckboxesWidget: React.ComponentType<WidgetProps>;
333
  ColorWidget: React.ComponentType<WidgetProps>;
334
  DateWidget: React.ComponentType<WidgetProps>;
335
  DateTimeWidget: React.ComponentType<WidgetProps>;
336
  EmailWidget: React.ComponentType<WidgetProps>;
337
  PasswordWidget: React.ComponentType<WidgetProps>;
338
  RadioWidget: React.ComponentType<WidgetProps>;
339
  RangeWidget: React.ComponentType<WidgetProps>;
340
  SelectWidget: React.ComponentType<WidgetProps>;
341
  SubmitButton: React.ComponentType<WidgetProps>;
342
  TextWidget: React.ComponentType<WidgetProps>;
343
  TextareaWidget: React.ComponentType<WidgetProps>;
344
  URLWidget: React.ComponentType<WidgetProps>;
345
  UpDownWidget: React.ComponentType<WidgetProps>;
346
}
347

348
declare const Widgets: WidgetCollection;
349
```
350

351
## Usage Examples
352

353
### Custom Widget Integration
354

355
```typescript
356
import { Widgets } from "@rjsf/material-ui/v5";
357
import Form from "@rjsf/material-ui/v5";
358

359
const customWidgets = {
360
  ...Widgets,
361
  MyCustomWidget: ({ value, onChange }) => (
362
    <input value={value} onChange={(e) => onChange(e.target.value)} />
363
  ),
364
};
365

366
function FormWithCustomWidget() {
367
  return (
368
    <Form
369
      schema={schema}
370
      widgets={customWidgets}
371
      uiSchema={{
372
        myField: { "ui:widget": "MyCustomWidget" }
373
      }}
374
    />
375
  );
376
}
377
```
378

379
### Widget Options
380

381
```typescript
382
const uiSchema = {
383
  description: {
384
    "ui:widget": "textarea",
385
    "ui:options": {
386
      rows: 5,
387
      placeholder: "Enter description..."
388
    }
389
  },
390
  rating: {
391
    "ui:widget": "range",
392
    "ui:options": {
393
      step: 0.5
394
    }
395
  }
396
};
397
```