0
# Input Components
1

2
Wide range of Material UI input components for data entry with validation and accessibility support in react-admin applications.
3

4
## Capabilities
5

6
### Text Input Components
7

8
Text-based input components for various data types with Material UI styling.
9

10
```typescript { .api }
11
/**
12
 * Standard text input component with validation and Material UI styling
13
 * @param props - TextInput configuration props
14
 * @returns Text input field with validation support
15
 */
16
function TextInput(props: TextInputProps): ReactElement;
17

18
/**
19
 * Password input component with visibility toggle
20
 * @param props - PasswordInput configuration props
21
 * @returns Password input with show/hide functionality
22
 */
23
function PasswordInput(props: PasswordInputProps): ReactElement;
24

25
interface TextInputProps {
26
  /** Field source property name */
27
  source: string;
28
  /** Input label text */
29
  label?: string;
30
  /** Helper text below input */
31
  helperText?: string;
32
  /** Validation rules */
33
  validate?: Function | Function[];
34
  /** Whether input is required */
35
  required?: boolean;
36
  /** Whether input is disabled */
37
  disabled?: boolean;
38
  /** Whether input is read-only */
39
  readOnly?: boolean;
40
  /** Placeholder text */
41
  placeholder?: string;
42
  /** Whether input supports multiple lines */
43
  multiline?: boolean;
44
  /** Number of rows for multiline */
45
  rows?: number;
46
  /** Maximum number of rows for multiline */
47
  maxRows?: number;
48
  /** Input variant */
49
  variant?: 'standard' | 'outlined' | 'filled';
50
  /** Full width styling */
51
  fullWidth?: boolean;
52
  /** Input margin */
53
  margin?: 'none' | 'dense' | 'normal';
54
}
55

56
interface PasswordInputProps extends Omit<TextInputProps, 'multiline' | 'rows'> {
57
  /** Initial visibility state */
58
  initiallyVisible?: boolean;
59
}
60
```
61

62
**Usage Examples:**
63

64
```typescript
65
import { TextInput, PasswordInput } from "ra-ui-materialui";
66
import { required, minLength, email } from "ra-core";
67

68
// Basic text input
69
<TextInput source="name" />
70

71
// Validated text input
72
<TextInput 
73
  source="email" 
74
  label="Email Address"
75
  validate={[required(), email()]}
76
  fullWidth
77
/>
78

79
// Multiline text input
80
<TextInput 
81
  source="description" 
82
  multiline 
83
  rows={4}
84
  helperText="Enter a detailed description"
85
/>
86

87
// Password input
88
<PasswordInput 
89
  source="password" 
90
  validate={[required(), minLength(8)]}
91
/>
92
```
93

94
### Numeric Input Components
95

96
Input components for numeric data with formatting and validation.
97

98
```typescript { .api }
99
/**
100
 * Number input component with formatting and validation
101
 * @param props - NumberInput configuration props
102
 * @returns Number input with proper formatting
103
 */
104
function NumberInput(props: NumberInputProps): ReactElement;
105

106
interface NumberInputProps {
107
  /** Field source property name */
108
  source: string;
109
  /** Input label text */
110
  label?: string;
111
  /** Helper text below input */
112
  helperText?: string;
113
  /** Validation rules */
114
  validate?: Function | Function[];
115
  /** Minimum allowed value */
116
  min?: number;
117
  /** Maximum allowed value */
118
  max?: number;
119
  /** Step increment value */
120
  step?: number;
121
  /** Whether input is required */
122
  required?: boolean;
123
  /** Whether input is disabled */
124
  disabled?: boolean;
125
  /** Input variant */
126
  variant?: 'standard' | 'outlined' | 'filled';
127
  /** Full width styling */
128
  fullWidth?: boolean;
129
  /** Format function for display */
130
  format?: (value: number) => string;
131
  /** Parse function for input */
132
  parse?: (value: string) => number;
133
}
134
```
135

136
### Date and Time Input Components
137

138
Date and time input components with Material UI date pickers.
139

140
```typescript { .api }
141
/**
142
 * Date input component with Material UI date picker
143
 * @param props - DateInput configuration props
144
 * @returns Date picker input component
145
 */
146
function DateInput(props: DateInputProps): ReactElement;
147

148
/**
149
 * DateTime input component with date and time selection
150
 * @param props - DateTimeInput configuration props
151
 * @returns DateTime picker input component
152
 */
153
function DateTimeInput(props: DateTimeInputProps): ReactElement;
154

155
interface DateInputProps {
156
  /** Field source property name */
157
  source: string;
158
  /** Input label text */
159
  label?: string;
160
  /** Helper text below input */
161
  helperText?: string;
162
  /** Validation rules */
163
  validate?: Function | Function[];
164
  /** Whether input is required */
165
  required?: boolean;
166
  /** Whether input is disabled */
167
  disabled?: boolean;
168
  /** Input variant */
169
  variant?: 'standard' | 'outlined' | 'filled';
170
  /** Full width styling */
171
  fullWidth?: boolean;
172
  /** Minimum selectable date */
173
  minDate?: Date;
174
  /** Maximum selectable date */
175
  maxDate?: Date;
176
  /** Date format string */
177
  format?: string;
178
}
179

180
interface DateTimeInputProps extends DateInputProps {
181
  /** Time format string */
182
  timeFormat?: string;
183
  /** Whether to show seconds */
184
  showSeconds?: boolean;
185
}
186
```
187

188
### Selection Input Components
189

190
Input components for selecting from predefined options.
191

192
```typescript { .api }
193
/**
194
 * Select dropdown input component
195
 * @param props - SelectInput configuration props
196
 * @returns Select dropdown with options
197
 */
198
function SelectInput(props: SelectInputProps): ReactElement;
199

200
/**
201
 * Multiple select input component
202
 * @param props - SelectArrayInput configuration props
203
 * @returns Multi-select dropdown component
204
 */
205
function SelectArrayInput(props: SelectArrayInputProps): ReactElement;
206

207
/**
208
 * Radio button group input component
209
 * @param props - RadioButtonGroupInput configuration props
210
 * @returns Radio button group for single selection
211
 */
212
function RadioButtonGroupInput(props: RadioButtonGroupInputProps): ReactElement;
213

214
/**
215
 * Checkbox group input component
216
 * @param props - CheckboxGroupInput configuration props
217
 * @returns Checkbox group for multiple selection
218
 */
219
function CheckboxGroupInput(props: CheckboxGroupInputProps): ReactElement;
220

221
interface SelectInputProps {
222
  /** Field source property name */
223
  source: string;
224
  /** Input label text */
225
  label?: string;
226
  /** Helper text below input */
227
  helperText?: string;
228
  /** Validation rules */
229
  validate?: Function | Function[];
230
  /** Available options */
231
  choices: Choice[];
232
  /** Property name for option value */
233
  optionValue?: string;
234
  /** Property name for option text */
235
  optionText?: string;
236
  /** Whether input is required */
237
  required?: boolean;
238
  /** Whether input is disabled */
239
  disabled?: boolean;
240
  /** Whether to disable option matching */
241
  disableValue?: boolean;
242
  /** Input variant */
243
  variant?: 'standard' | 'outlined' | 'filled';
244
  /** Full width styling */
245
  fullWidth?: boolean;
246
}
247

248
interface Choice {
249
  id: any;
250
  name: string;
251
  [key: string]: any;
252
}
253
```
254

255
### Boolean Input Components
256

257
Input components for boolean/checkbox data.
258

259
```typescript { .api }
260
/**
261
 * Boolean input component with checkbox or switch styling
262
 * @param props - BooleanInput configuration props
263
 * @returns Checkbox or switch for boolean values
264
 */
265
function BooleanInput(props: BooleanInputProps): ReactElement;
266

267
interface BooleanInputProps {
268
  /** Field source property name */
269
  source: string;
270
  /** Input label text */
271
  label?: string;
272
  /** Helper text below input */
273
  helperText?: string;
274
  /** Validation rules */
275
  validate?: Function | Function[];
276
  /** Whether input is required */
277
  required?: boolean;
278
  /** Whether input is disabled */
279
  disabled?: boolean;
280
  /** Row layout instead of column */
281
  row?: boolean;
282
  /** Use switch instead of checkbox */
283
  useSwitch?: boolean;
284
  /** Default checked state */
285
  defaultValue?: boolean;
286
}
287
```
288

289
### Advanced Input Components
290

291
Advanced input components for complex data types.
292

293
```typescript { .api }
294
/**
295
 * Autocomplete input component with search functionality
296
 * @param props - AutocompleteInput configuration props
297
 * @returns Autocomplete input with search and selection
298
 */
299
function AutocompleteInput(props: AutocompleteInputProps): ReactElement;
300

301
/**
302
 * Autocomplete array input for multiple selections
303
 * @param props - AutocompleteArrayInput configuration props
304
 * @returns Multi-select autocomplete component
305
 */
306
function AutocompleteArrayInput(props: AutocompleteArrayInputProps): ReactElement;
307

308
/**
309
 * File upload input component
310
 * @param props - FileInput configuration props
311
 * @returns File upload input with preview
312
 */
313
function FileInput(props: FileInputProps): ReactElement;
314

315
/**
316
 * Image upload input component with preview
317
 * @param props - ImageInput configuration props
318
 * @returns Image upload input with thumbnail preview
319
 */
320
function ImageInput(props: ImageInputProps): ReactElement;
321

322
interface AutocompleteInputProps {
323
  /** Field source property name */
324
  source: string;
325
  /** Input label text */
326
  label?: string;
327
  /** Available choices */
328
  choices: Choice[];
329
  /** Property name for option value */
330
  optionValue?: string;
331
  /** Property name for option text */
332
  optionText?: string;
333
  /** Whether input is required */
334
  required?: boolean;
335
  /** Whether input is disabled */
336
  disabled?: boolean;
337
  /** Whether to create new options */
338
  create?: boolean;
339
  /** Filter to match function */
340
  filterToQuery?: (searchText: string) => any;
341
  /** Input debounce delay */
342
  debounce?: number;
343
}
344

345
interface FileInputProps {
346
  /** Field source property name */
347
  source: string;
348
  /** Input label text */
349
  label?: string;
350
  /** Accepted file types */
351
  accept?: string;
352
  /** Whether multiple files allowed */
353
  multiple?: boolean;
354
  /** Maximum file size in bytes */
355
  maxSize?: number;
356
  /** Minimum file size in bytes */
357
  minSize?: number;
358
  /** Custom placeholder text */
359
  placeholder?: string;
360
  /** Custom file removal label */
361
  removeLabel?: string;
362
}
363
```
364

365
## Input Utilities
366

367
### Input Validation and Helpers
368

369
Utility components and hooks for input validation and helper text.
370

371
```typescript { .api }
372
/**
373
 * Input helper text component for displaying validation messages
374
 * @param props - InputHelperText configuration props
375
 * @returns Helper text component with error styling
376
 */
377
function InputHelperText(props: InputHelperTextProps): ReactElement;
378

379
/**
380
 * Hook for input field functionality with validation
381
 * @param props - Input configuration
382
 * @returns Input field properties and methods
383
 */
384
function useInput(props: UseInputProps): UseInputResult;
385

386
interface InputHelperTextProps {
387
  /** Helper text content */
388
  children?: ReactNode;
389
  /** Whether text indicates an error */
390
  error?: boolean;
391
  /** Helper text variant */
392
  variant?: 'standard' | 'outlined' | 'filled';
393
}
394

395
interface UseInputProps {
396
  /** Field source property name */
397
  source: string;
398
  /** Default value */
399
  defaultValue?: any;
400
  /** Validation rules */
401
  validate?: Function | Function[];
402
  /** Format function for display */
403
  format?: (value: any) => any;
404
  /** Parse function for input */
405
  parse?: (value: any) => any;
406
}
407

408
interface UseInputResult {
409
  field: {
410
    name: string;
411
    value: any;
412
    onChange: (event: any) => void;
413
    onBlur: (event: any) => void;
414
  };
415
  fieldState: {
416
    error?: any;
417
    invalid: boolean;
418
    isDirty: boolean;
419
    isTouched: boolean;
420
  };
421
  formState: {
422
    isSubmitting: boolean;
423
    isValid: boolean;
424
  };
425
}
426
```
427

428
**Usage Examples:**
429

430
```typescript
431
import { 
432
  NumberInput, 
433
  DateInput, 
434
  SelectInput, 
435
  BooleanInput,
436
  AutocompleteInput,
437
  FileInput
438
} from "ra-ui-materialui";
439

440
// Number input with validation
441
<NumberInput 
442
  source="price" 
443
  label="Price ($)"
444
  min={0}
445
  step={0.01}
446
  validate={[required(), minValue(0)]}
447
/>
448

449
// Date input
450
<DateInput 
451
  source="birthDate" 
452
  label="Birth Date"
453
  minDate={new Date('1900-01-01')}
454
  maxDate={new Date()}
455
/>
456

457
// Select input with choices
458
<SelectInput 
459
  source="category" 
460
  choices={[
461
    { id: 'tech', name: 'Technology' },
462
    { id: 'health', name: 'Healthcare' },
463
    { id: 'finance', name: 'Finance' }
464
  ]}
465
/>
466

467
// Boolean input as switch
468
<BooleanInput 
469
  source="isActive" 
470
  label="Active Status"
471
  useSwitch={true}
472
/>
473

474
// File upload
475
<FileInput 
476
  source="documents" 
477
  accept=".pdf,.doc,.docx"
478
  multiple={true}
479
  maxSize={5000000}
480
/>
481
```
482

483
## Types
484

485
```typescript { .api }
486
interface ValidationError {
487
  message: string;
488
  type: string;
489
  ref?: any;
490
}
491

492
interface InputChangeEvent {
493
  target: {
494
    name: string;
495
    value: any;
496
  };
497
}
498

499
interface FileObject {
500
  src: string;
501
  title?: string;
502
  rawFile?: File;
503
}
504
```