0
# Field Components
1

2
Form field components for all data types including text, selection, rich content, and complex structured data. All field components integrate with the form system and provide consistent validation, labeling, and error handling.
3

4
## Text Fields
5

6
### TextField
7

8
Single-line text input field.
9

10
```typescript { .api }
11
interface TextFieldProps {
12
  path: string;
13
  label?: string;
14
  placeholder?: string;
15
  required?: boolean;
16
  readOnly?: boolean;
17
  validate?: (value: string) => string | true;
18
  admin?: {
19
    description?: string;
20
    condition?: (data: Record<string, unknown>) => boolean;
21
  };
22
}
23

24
function TextField(props: TextFieldProps): JSX.Element;
25
```
26

27
### TextInput
28

29
Standalone text input component (without form integration).
30

31
```typescript { .api }
32
interface TextInputProps {
33
  value?: string;
34
  onChange?: (value: string) => void;
35
  placeholder?: string;
36
  disabled?: boolean;
37
  readOnly?: boolean;
38
  hasError?: boolean;
39
  className?: string;
40
}
41

42
function TextInput(props: TextInputProps): JSX.Element;
43
```
44

45
### TextareaField
46

47
Multi-line text input field.
48

49
```typescript { .api }
50
interface TextareaFieldProps {
51
  path: string;
52
  label?: string;
53
  placeholder?: string;
54
  required?: boolean;
55
  readOnly?: boolean;
56
  rows?: number;
57
  validate?: (value: string) => string | true;
58
}
59

60
function TextareaField(props: TextareaFieldProps): JSX.Element;
61
```
62

63
### TextareaInput
64

65
Standalone textarea input component.
66

67
```typescript { .api }
68
interface TextAreaInputProps {
69
  value?: string;
70
  onChange?: (value: string) => void;
71
  placeholder?: string;
72
  disabled?: boolean;
73
  readOnly?: boolean;
74
  rows?: number;
75
  hasError?: boolean;
76
}
77

78
function TextareaInput(props: TextAreaInputProps): JSX.Element;
79
```
80

81
### EmailField
82

83
Email input field with validation.
84

85
```typescript { .api }
86
interface EmailFieldProps {
87
  path: string;
88
  label?: string;
89
  placeholder?: string;
90
  required?: boolean;
91
  readOnly?: boolean;
92
}
93

94
function EmailField(props: EmailFieldProps): JSX.Element;
95
```
96

97
### PasswordField
98

99
Password input field.
100

101
```typescript { .api }
102
interface PasswordFieldProps {
103
  path: string;
104
  label?: string;
105
  placeholder?: string;
106
  required?: boolean;
107
  readOnly?: boolean;
108
  autoComplete?: string;
109
}
110

111
function PasswordField(props: PasswordFieldProps): JSX.Element;
112
```
113

114
### ConfirmPasswordField
115

116
Password confirmation field with matching validation.
117

118
```typescript { .api }
119
interface ConfirmPasswordFieldProps {
120
  path: string;
121
  label?: string;
122
  placeholder?: string;
123
  required?: boolean;
124
  passwordPath?: string;
125
}
126

127
function ConfirmPasswordField(props: ConfirmPasswordFieldProps): JSX.Element;
128
```
129

130
## Selection Fields
131

132
### SelectField
133

134
Dropdown selection field.
135

136
```typescript { .api }
137
interface SelectFieldProps {
138
  path: string;
139
  label?: string;
140
  placeholder?: string;
141
  required?: boolean;
142
  readOnly?: boolean;
143
  options: SelectOption[];
144
  hasMany?: boolean;
145
}
146

147
interface SelectOption {
148
  label: string;
149
  value: string | number;
150
  disabled?: boolean;
151
}
152

153
function SelectField(props: SelectFieldProps): JSX.Element;
154
```
155

156
### SelectInput
157

158
Standalone select input component.
159

160
```typescript { .api }
161
interface SelectInputProps {
162
  value?: string | number | (string | number)[];
163
  onChange?: (value: string | number | (string | number)[]) => void;
164
  options: SelectOption[];
165
  placeholder?: string;
166
  disabled?: boolean;
167
  hasMany?: boolean;
168
}
169

170
function SelectInput(props: SelectInputProps): JSX.Element;
171
```
172

173
### RadioGroupField
174

175
Radio button group field.
176

177
```typescript { .api }
178
interface RadioGroupFieldProps {
179
  path: string;
180
  label?: string;
181
  required?: boolean;
182
  readOnly?: boolean;
183
  options: RadioOption[];
184
  layout?: 'horizontal' | 'vertical';
185
}
186

187
interface RadioOption {
188
  label: string;
189
  value: string | number;
190
  disabled?: boolean;
191
}
192

193
function RadioGroupField(props: RadioGroupFieldProps): JSX.Element;
194
```
195

196
### CheckboxField
197

198
Checkbox input field.
199

200
```typescript { .api }
201
interface CheckboxFieldProps {
202
  path: string;
203
  label?: string;
204
  required?: boolean;
205
  readOnly?: boolean;
206
}
207

208
function CheckboxField(props: CheckboxFieldProps): JSX.Element;
209
```
210

211
### CheckboxInput
212

213
Standalone checkbox input component.
214

215
```typescript { .api }
216
interface CheckboxInputProps {
217
  checked?: boolean;
218
  onChange?: (checked: boolean) => void;
219
  disabled?: boolean;
220
  readOnly?: boolean;
221
  label?: string;
222
}
223

224
function CheckboxInput(props: CheckboxInputProps): JSX.Element;
225
```
226

227
## Complex Fields
228

229
### RelationshipField
230

231
Relationship selection field for connecting documents.
232

233
```typescript { .api }
234
interface RelationshipFieldProps {
235
  path: string;
236
  label?: string;
237
  relationTo: string | string[];
238
  hasMany?: boolean;
239
  maxDepth?: number;
240
  required?: boolean;
241
  readOnly?: boolean;
242
  admin?: {
243
    allowCreate?: boolean;
244
    isSortable?: boolean;
245
  };
246
}
247

248
function RelationshipField(props: RelationshipFieldProps): JSX.Element;
249
```
250

251
### RelationshipInput
252

253
Standalone relationship input component.
254

255
```typescript { .api }
256
interface RelationshipInputProps {
257
  value?: RelationshipValue | RelationshipValue[];
258
  onChange?: (value: RelationshipValue | RelationshipValue[]) => void;
259
  relationTo: string | string[];
260
  hasMany?: boolean;
261
  disabled?: boolean;
262
}
263

264
interface RelationshipValue {
265
  relationTo: string;
266
  value: string | number | Record<string, unknown>;
267
}
268

269
function RelationshipInput(props: RelationshipInputProps): JSX.Element;
270
```
271

272
### UploadField
273

274
File upload field.
275

276
```typescript { .api }
277
interface UploadFieldProps {
278
  path: string;
279
  label?: string;
280
  relationTo: string;
281
  required?: boolean;
282
  readOnly?: boolean;
283
  admin?: {
284
    description?: string;
285
  };
286
}
287

288
function UploadField(props: UploadFieldProps): JSX.Element;
289
```
290

291
### UploadInput
292

293
Standalone upload input component.
294

295
```typescript { .api }
296
interface UploadInputProps {
297
  value?: UploadValue;
298
  onChange?: (value: UploadValue | null) => void;
299
  relationTo: string;
300
  disabled?: boolean;
301
}
302

303
interface UploadValue {
304
  id: string;
305
  filename: string;
306
  mimeType: string;
307
  filesize: number;
308
  width?: number;
309
  height?: number;
310
}
311

312
function UploadInput(props: UploadInputProps): JSX.Element;
313
```
314

315
### RichTextField
316

317
Rich text editor field.
318

319
```typescript { .api }
320
interface RichTextFieldProps {
321
  path: string;
322
  label?: string;
323
  required?: boolean;
324
  readOnly?: boolean;
325
  admin?: {
326
    elements?: RichTextElement[];
327
    leaves?: RichTextLeaf[];
328
    upload?: {
329
      collections: {
330
        [collection: string]: {
331
          fields: FieldConfig[];
332
        };
333
      };
334
    };
335
  };
336
}
337

338
function RichTextField(props: RichTextFieldProps): JSX.Element;
339
```
340

341
### CodeField
342

343
Code editor field with syntax highlighting.
344

345
```typescript { .api }
346
interface CodeFieldProps {
347
  path: string;
348
  label?: string;
349
  required?: boolean;
350
  readOnly?: boolean;
351
  admin?: {
352
    language?: string;
353
    editorOptions?: Record<string, unknown>;
354
  };
355
}
356

357
function CodeField(props: CodeFieldProps): JSX.Element;
358
```
359

360
### JSONField
361

362
JSON editor field.
363

364
```typescript { .api }
365
interface JSONFieldProps {
366
  path: string;
367
  label?: string;
368
  required?: boolean;
369
  readOnly?: boolean;
370
  admin?: {
371
    editorOptions?: Record<string, unknown>;
372
  };
373
}
374

375
function JSONField(props: JSONFieldProps): JSX.Element;
376
```
377

378
## Structural Fields
379

380
### GroupField
381

382
Field grouping container.
383

384
```typescript { .api }
385
interface GroupFieldProps {
386
  path: string;
387
  label?: string;
388
  fields: FieldConfig[];
389
  admin?: {
390
    hideGutter?: boolean;
391
    description?: string;
392
  };
393
}
394

395
function GroupField(props: GroupFieldProps): JSX.Element;
396
```
397

398
### ArrayField
399

400
Dynamic array of fields.
401

402
```typescript { .api }
403
interface ArrayFieldProps {
404
  path: string;
405
  label?: string;
406
  fields: FieldConfig[];
407
  minRows?: number;
408
  maxRows?: number;
409
  required?: boolean;
410
  admin?: {
411
    initCollapsed?: boolean;
412
    components?: {
413
      RowLabel?: React.ComponentType<RowLabelProps>;
414
    };
415
  };
416
}
417

418
function ArrayField(props: ArrayFieldProps): JSX.Element;
419
```
420

421
### BlocksField
422

423
Blocks/layout builder field.
424

425
```typescript { .api }
426
interface BlocksFieldProps {
427
  path: string;
428
  label?: string;
429
  blocks: BlockConfig[];
430
  minRows?: number;
431
  maxRows?: number;
432
  required?: boolean;
433
  admin?: {
434
    initCollapsed?: boolean;
435
  };
436
}
437

438
interface BlockConfig {
439
  slug: string;
440
  labels: {
441
    singular: string;
442
    plural: string;
443
  };
444
  fields: FieldConfig[];
445
  admin?: {
446
    components?: {
447
      Icon?: React.ComponentType;
448
    };
449
  };
450
}
451

452
function BlocksField(props: BlocksFieldProps): JSX.Element;
453
```
454

455
### CollapsibleField
456

457
Collapsible field container.
458

459
```typescript { .api }
460
interface CollapsibleFieldProps {
461
  path?: string;
462
  label: string;
463
  fields: FieldConfig[];
464
  admin?: {
465
    initCollapsed?: boolean;
466
    description?: string;
467
  };
468
}
469

470
function CollapsibleField(props: CollapsibleFieldProps): JSX.Element;
471
```
472

473
### RowField
474

475
Horizontal field layout.
476

477
```typescript { .api }
478
interface RowFieldProps {
479
  fields: FieldConfig[];
480
  admin?: {
481
    className?: string;
482
  };
483
}
484

485
function RowField(props: RowFieldProps): JSX.Element;
486
```
487

488
### TabsField
489

490
Tabbed field interface.
491

492
```typescript { .api }
493
interface TabsFieldProps {
494
  tabs: TabConfig[];
495
}
496

497
interface TabConfig {
498
  label: string;
499
  fields: FieldConfig[];
500
  admin?: {
501
    condition?: (data: Record<string, unknown>) => boolean;
502
    description?: string;
503
  };
504
}
505

506
function TabsField(props: TabsFieldProps): JSX.Element;
507
```
508

509
## Specialized Fields
510

511
### DateTimeField
512

513
Date and time picker field.
514

515
```typescript { .api }
516
interface DateTimeFieldProps {
517
  path: string;
518
  label?: string;
519
  required?: boolean;
520
  readOnly?: boolean;
521
  admin?: {
522
    date?: {
523
      pickerAppearance?: 'default' | 'dayOnly' | 'timeOnly';
524
      displayFormat?: string;
525
    };
526
  };
527
}
528

529
function DateTimeField(props: DateTimeFieldProps): JSX.Element;
530
```
531

532
### NumberField
533

534
Number input field.
535

536
```typescript { .api }
537
interface NumberFieldProps {
538
  path: string;
539
  label?: string;
540
  required?: boolean;
541
  readOnly?: boolean;
542
  min?: number;
543
  max?: number;
544
  step?: number;
545
}
546

547
function NumberField(props: NumberFieldProps): JSX.Element;
548
```
549

550
### PointField
551

552
Geographic point (coordinates) field.
553

554
```typescript { .api }
555
interface PointFieldProps {
556
  path: string;
557
  label?: string;
558
  required?: boolean;
559
  readOnly?: boolean;
560
}
561

562
function PointField(props: PointFieldProps): JSX.Element;
563
```
564

565
### JoinField
566

567
Join relationships field.
568

569
```typescript { .api }
570
interface JoinFieldProps {
571
  path: string;
572
  collection: string;
573
  on: string;
574
  admin?: {
575
    where?: Record<string, unknown>;
576
    maxDepth?: number;
577
  };
578
}
579

580
function JoinField(props: JoinFieldProps): JSX.Element;
581
```
582

583
### UIField
584

585
Custom UI component field.
586

587
```typescript { .api }
588
interface UIFieldProps {
589
  path?: string;
590
  admin: {
591
    components: {
592
      Field: React.ComponentType<any>;
593
    };
594
  };
595
}
596

597
function UIField(props: UIFieldProps): JSX.Element;
598
```
599

600
### HiddenField
601

602
Hidden form field.
603

604
```typescript { .api }
605
interface HiddenFieldProps {
606
  path: string;
607
  value?: unknown;
608
}
609

610
function HiddenField(props: HiddenFieldProps): JSX.Element;
611
```
612

613
## Field Support Components
614

615
### FieldLabel
616

617
Consistent field labeling component.
618

619
```typescript { .api }
620
interface FieldLabelProps {
621
  htmlFor?: string;
622
  label?: string;
623
  required?: boolean;
624
}
625

626
function FieldLabel(props: FieldLabelProps): JSX.Element;
627
```
628

629
### FieldDescription
630

631
Field help text component.
632

633
```typescript { .api }
634
interface FieldDescriptionProps {
635
  description?: string;
636
}
637

638
function FieldDescription(props: FieldDescriptionProps): JSX.Element;
639
```
640

641
### FieldError
642

643
Field error display component.
644

645
```typescript { .api }
646
interface FieldErrorProps {
647
  message?: string;
648
  showError?: boolean;
649
}
650

651
function FieldError(props: FieldErrorProps): JSX.Element;
652
```
653

654
## Field Components Registry
655

656
Access all field components through the registry.
657

658
```typescript { .api }
659
const fieldComponents: {
660
  [fieldType: string]: React.ComponentType<any>;
661
};
662

663
const allFieldComponents: {
664
  [fieldType: string]: React.ComponentType<any>;
665
};
666
```
667

668
Usage example:
669
```typescript
670
import { fieldComponents } from '@payloadcms/ui';
671

672
// Dynamically render field based on type
673
function RenderField({ field, path }) {
674
  const FieldComponent = fieldComponents[field.type];
675
  
676
  if (!FieldComponent) {
677
    return <div>Unsupported field type: {field.type}</div>;
678
  }
679
  
680
  return <FieldComponent {...field} path={path} />;
681
}
682
```
683

684
## Types
685

686
```typescript { .api }
687
interface FieldConfig {
688
  type: string;
689
  name: string;
690
  label?: string;
691
  required?: boolean;
692
  admin?: Record<string, unknown>;
693
}
694

695
interface RowLabelProps {
696
  data: Record<string, unknown>;
697
  index: number;
698
  path: string;
699
}
700

701
type RichTextElement = 
702
  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
703
  | 'blockquote' | 'ul' | 'ol' | 'li'
704
  | 'link' | 'relationship' | 'upload';
705

706
type RichTextLeaf = 
707
  | 'bold' | 'italic' | 'underline' | 'strikethrough' 
708
  | 'code' | 'subscript' | 'superscript';
709
```