0
# Form Components
1

2
Complete form control library with 29 input components including text inputs, dropdowns, date pickers, file uploads, and validation integration. All form components support v-model binding, validation states, and accessibility features.
3

4
## Capabilities
5

6
### Text Input Components
7

8
#### InputText
9
Standard text input with validation states and sizing options.
10

11
```typescript { .api }
12
/**
13
 * Basic text input component with validation states
14
 */
15
import InputText from "primevue/inputtext";
16

17
interface InputTextProps extends BaseComponentProps {
18
  modelValue?: string;
19
  size?: "small" | "large";
20
  invalid?: boolean;
21
  variant?: "filled" | "outlined";
22
  placeholder?: string;
23
  disabled?: boolean;
24
  readonly?: boolean;
25
}
26
```
27

28
**Usage Example:**
29

30
```vue
31
<template>
32
  <InputText 
33
    v-model="username" 
34
    placeholder="Enter username"
35
    :invalid="!isValid"
36
    size="large"
37
  />
38
</template>
39

40
<script setup>
41
import { ref } from 'vue';
42
import InputText from 'primevue/inputtext';
43

44
const username = ref('');
45
const isValid = ref(true);
46
</script>
47
```
48

49
#### AutoComplete
50
Input component with real-time suggestions and filtering capabilities.
51

52
```typescript { .api }
53
/**
54
 * AutoComplete input with real-time suggestions
55
 */
56
import AutoComplete from "primevue/autocomplete";
57

58
interface AutoCompleteProps extends BaseComponentProps {
59
  modelValue?: any;
60
  suggestions?: any[];
61
  optionLabel?: string | ((data: any) => string);
62
  optionDisabled?: string | ((data: any) => boolean);
63
  optionGroupLabel?: string | ((data: any) => string);
64
  optionGroupChildren?: string | ((data: any) => any[]);
65
  placeholder?: string;
66
  disabled?: boolean;
67
  multiple?: boolean;
68
  minLength?: number;
69
  delay?: number;
70
  dropdown?: boolean;
71
  autoHighlight?: boolean;
72
  forceSelection?: boolean;
73
  completeMethod?: (event: AutoCompleteCompleteEvent) => void;
74
}
75

76
interface AutoCompleteCompleteEvent {
77
  originalEvent: Event;
78
  query: string;
79
}
80
```
81

82
**Usage Example:**
83

84
```vue
85
<template>
86
  <AutoComplete
87
    v-model="selectedUser"
88
    :suggestions="filteredUsers"
89
    @complete="searchUsers"
90
    optionLabel="name"
91
    placeholder="Search users..."
92
    dropdown
93
    :min-length="2"
94
  />
95
</template>
96

97
<script setup>
98
import { ref } from 'vue';
99
import AutoComplete from 'primevue/autocomplete';
100

101
const selectedUser = ref(null);
102
const filteredUsers = ref([]);
103
const users = ref([
104
  { name: 'John Doe', id: 1 },
105
  { name: 'Jane Smith', id: 2 },
106
  { name: 'Bob Johnson', id: 3 }
107
]);
108

109
const searchUsers = (event) => {
110
  const query = event.query.toLowerCase();
111
  filteredUsers.value = users.value.filter(user => 
112
    user.name.toLowerCase().includes(query)
113
  );
114
};
115
</script>
116
```
117

118
#### Textarea
119
Multi-line text input with auto-resize capabilities.
120

121
```typescript { .api }
122
/**
123
 * Multi-line text input with auto-resize options
124
 */
125
import Textarea from "primevue/textarea";
126

127
interface TextareaProps extends BaseComponentProps {
128
  modelValue?: string;
129
  autoResize?: boolean;
130
  rows?: number;
131
  cols?: number;
132
  placeholder?: string;
133
  disabled?: boolean;
134
  readonly?: boolean;
135
  invalid?: boolean;
136
}
137
```
138

139
#### Password
140
Password input with strength meter and toggle visibility.
141

142
```typescript { .api }
143
/**
144
 * Password input with strength meter and visibility toggle
145
 */
146
import Password from "primevue/password";
147

148
interface PasswordProps extends BaseComponentProps {
149
  modelValue?: string;
150
  promptLabel?: string;
151
  mediumRegex?: string;
152
  strongRegex?: string;
153
  weakLabel?: string;
154
  mediumLabel?: string;
155
  strongLabel?: string;
156
  feedback?: boolean;
157
  toggleMask?: boolean;
158
  appendTo?: string;
159
  placeholder?: string;
160
  disabled?: boolean;
161
  invalid?: boolean;
162
}
163
```
164

165
#### InputMask
166
Text input with formatting mask patterns.
167

168
```typescript { .api }
169
/**
170
 * Text input with formatting mask patterns
171
 */
172
import InputMask from "primevue/inputmask";
173

174
interface InputMaskProps extends BaseComponentProps {
175
  modelValue?: string;
176
  mask?: string;
177
  placeholder?: string;
178
  slotChar?: string;
179
  autoClear?: boolean;
180
  unmask?: boolean;
181
  readonly?: boolean;
182
  disabled?: boolean;
183
  invalid?: boolean;
184
}
185
```
186

187
**Usage Example:**
188

189
```vue
190
<template>
191
  <InputMask 
192
    v-model="phone" 
193
    mask="(999) 999-9999"
194
    placeholder="(999) 999-9999"
195
  />
196
  <InputMask 
197
    v-model="ssn" 
198
    mask="999-99-9999"
199
    placeholder="999-99-9999"
200
  />
201
</template>
202
```
203

204
#### InputNumber
205
Numeric input with formatting, min/max, and step controls.
206

207
```typescript { .api }
208
/**
209
 * Numeric input with formatting and validation
210
 */
211
import InputNumber from "primevue/inputnumber";
212

213
interface InputNumberProps extends BaseComponentProps {
214
  modelValue?: number;
215
  format?: boolean;
216
  showButtons?: boolean;
217
  buttonLayout?: "stacked" | "horizontal" | "vertical";
218
  incrementButtonClass?: string;
219
  decrementButtonClass?: string;
220
  incrementButtonIcon?: string;
221
  decrementButtonIcon?: string;
222
  locale?: string;
223
  localeMatcher?: string;
224
  mode?: "decimal" | "currency";
225
  currency?: string;
226
  currencyDisplay?: string;
227
  useGrouping?: boolean;
228
  minFractionDigits?: number;
229
  maxFractionDigits?: number;
230
  min?: number;
231
  max?: number;
232
  step?: number;
233
  placeholder?: string;
234
  disabled?: boolean;
235
  readonly?: boolean;
236
  invalid?: boolean;
237
}
238
```
239

240
### Selection Components
241

242
#### Dropdown (Legacy) / Select
243
Single selection dropdown with filtering and grouping.
244

245
```typescript { .api }
246
/**
247
 * Modern single selection dropdown (use Select for new projects)
248
 */
249
import Select from "primevue/select";
250
import Dropdown from "primevue/dropdown"; // Legacy
251

252
interface SelectProps extends BaseComponentProps {
253
  modelValue?: any;
254
  options?: any[];
255
  optionLabel?: string | ((option: any) => string);
256
  optionValue?: string | ((option: any) => any);
257
  optionDisabled?: string | ((option: any) => boolean);
258
  optionGroupLabel?: string;
259
  optionGroupChildren?: string;
260
  placeholder?: string;
261
  filter?: boolean;
262
  filterPlaceholder?: string;
263
  filterLocale?: string;
264
  filterMatchMode?: "contains" | "startsWith" | "endsWith";
265
  filterFields?: string[];
266
  editable?: boolean;
267
  showClear?: boolean;
268
  appendTo?: string;
269
  disabled?: boolean;
270
  invalid?: boolean;
271
  loading?: boolean;
272
  loadingIcon?: string;
273
  resetFilterOnHide?: boolean;
274
  virtualScrollerOptions?: object;
275
}
276
```
277

278
**Usage Example:**
279

280
```vue
281
<template>
282
  <Select
283
    v-model="selectedCity"
284
    :options="cities"
285
    optionLabel="name"
286
    optionValue="code"
287
    placeholder="Select a City"
288
    filter
289
    class="w-full md:w-14rem"
290
  />
291
</template>
292

293
<script setup>
294
import { ref } from 'vue';
295
import Select from 'primevue/select';
296

297
const selectedCity = ref(null);
298
const cities = ref([
299
  { name: 'New York', code: 'NY' },
300
  { name: 'Rome', code: 'RM' },
301
  { name: 'London', code: 'LDN' },
302
  { name: 'Istanbul', code: 'IST' }
303
]);
304
</script>
305
```
306

307
#### MultiSelect
308
Multiple selection dropdown with chips display.
309

310
```typescript { .api }
311
/**
312
 * Multiple selection dropdown with chips
313
 */
314
import MultiSelect from "primevue/multiselect";
315

316
interface MultiSelectProps extends BaseComponentProps {
317
  modelValue?: any[];
318
  options?: any[];
319
  optionLabel?: string | ((option: any) => string);
320
  optionValue?: string | ((option: any) => any);
321
  optionDisabled?: string | ((option: any) => boolean);
322
  optionGroupLabel?: string;
323
  optionGroupChildren?: string;
324
  display?: "comma" | "chip";
325
  placeholder?: string;
326
  filter?: boolean;
327
  filterPlaceholder?: string;
328
  filterLocale?: string;
329
  filterMatchMode?: "contains" | "startsWith" | "endsWith";
330
  filterFields?: string[];
331
  showToggleAll?: boolean;
332
  selectAll?: boolean;
333
  resetFilterOnHide?: boolean;
334
  appendTo?: string;
335
  disabled?: boolean;
336
  invalid?: boolean;
337
  loading?: boolean;
338
  virtualScrollerOptions?: object;
339
  maxSelectedLabels?: number;
340
  selectedItemsLabel?: string;
341
}
342
```
343

344
#### Listbox
345
Selection component displaying options in a scrollable list format.
346

347
```typescript { .api }
348
/**
349
 * List-based selection component with multiple selection support
350
 */
351
import Listbox from "primevue/listbox";
352

353
interface ListboxProps extends BaseComponentProps {
354
  modelValue?: any;
355
  options?: any[];
356
  optionLabel?: string | ((option: any) => string);
357
  optionValue?: string | ((option: any) => any);
358
  optionDisabled?: string | ((option: any) => boolean);
359
  optionGroupLabel?: string;
360
  optionGroupChildren?: string;
361
  listStyle?: string;
362
  disabled?: boolean;
363
  multiple?: boolean;
364
  filter?: boolean;
365
  filterPlaceholder?: string;
366
  filterLocale?: string;
367
  filterMatchMode?: "contains" | "startsWith" | "endsWith";
368
  filterFields?: string[];
369
  filterInputProps?: object;
370
  virtualScrollerOptions?: object;
371
  autoOptionFocus?: boolean;
372
  selectOnFocus?: boolean;
373
  focusOnHover?: boolean;
374
}
375
```
376

377
**Usage Example:**
378

379
```vue
380
<template>
381
  <Listbox
382
    v-model="selectedCountries"
383
    :options="countries"
384
    optionLabel="name"
385
    optionValue="code"
386
    multiple
387
    filter
388
    filterPlaceholder="Search countries..."
389
    listStyle="max-height:250px"
390
  />
391
</template>
392

393
<script setup>
394
import { ref } from 'vue';
395
import Listbox from 'primevue/listbox';
396

397
const selectedCountries = ref([]);
398
const countries = ref([
399
  { name: 'United States', code: 'US' },
400
  { name: 'Canada', code: 'CA' },
401
  { name: 'United Kingdom', code: 'UK' },
402
  { name: 'Germany', code: 'DE' }
403
]);
404
</script>
405
```
406

407
#### CascadeSelect
408
Hierarchical selection dropdown for tree-structured data.
409

410
```typescript { .api }
411
/**
412
 * Cascading selection dropdown for hierarchical data
413
 */
414
import CascadeSelect from "primevue/cascadeselect";
415

416
interface CascadeSelectProps extends BaseComponentProps {
417
  modelValue?: any;
418
  options?: any[];
419
  optionLabel?: string | ((option: any) => string);
420
  optionValue?: string | ((option: any) => any);
421
  optionGroupLabel?: string | ((option: any) => string);
422
  optionGroupChildren?: string | ((option: any) => any[]);
423
  placeholder?: string;
424
  disabled?: boolean;
425
  loading?: boolean;
426
  invalid?: boolean;
427
  variant?: "filled" | "outlined";
428
  appendTo?: string;
429
}
430
```
431

432
**Usage Example:**
433

434
```vue
435
<template>
436
  <CascadeSelect
437
    v-model="selectedLocation"
438
    :options="locations"
439
    optionLabel="name"
440
    optionGroupLabel="name"
441
    optionGroupChildren="cities"
442
    placeholder="Select a location..."
443
  />
444
</template>
445

446
<script setup>
447
import { ref } from 'vue';
448
import CascadeSelect from 'primevue/cascadeselect';
449

450
const selectedLocation = ref(null);
451
const locations = ref([
452
  {
453
    name: 'United States',
454
    cities: [
455
      { name: 'New York', code: 'NY' },
456
      { name: 'Los Angeles', code: 'LA' }
457
    ]
458
  },
459
  {
460
    name: 'Canada', 
461
    cities: [
462
      { name: 'Toronto', code: 'TO' },
463
      { name: 'Vancouver', code: 'VA' }
464
    ]
465
  }
466
]);
467
</script>
468
```
469

470
#### TreeSelect
471
Tree-based selection dropdown for hierarchical data with expand/collapse functionality.
472

473
```typescript { .api }
474
/**
475
 * Tree-based selection dropdown with hierarchical data
476
 */
477
import TreeSelect from "primevue/treeselect";
478

479
interface TreeSelectProps extends BaseComponentProps {
480
  modelValue?: any;
481
  options?: any[];
482
  placeholder?: string;
483
  disabled?: boolean;
484
  selectionMode?: "single" | "multiple" | "checkbox";
485
  display?: "comma" | "chip";
486
  metaKeySelection?: boolean;
487
  appendTo?: string;
488
  emptyMessage?: string;
489
  filter?: boolean;
490
  filterBy?: string;
491
  filterMode?: "lenient" | "strict";
492
  filterPlaceholder?: string;
493
  filterLocale?: string;
494
  filterInputProps?: object;
495
  loading?: boolean;
496
  variant?: "filled" | "outlined";
497
  invalid?: boolean;
498
}
499
```
500

501
**Usage Example:**
502

503
```vue
504
<template>
505
  <TreeSelect
506
    v-model="selectedNodes"
507
    :options="treeData"
508
    selectionMode="multiple"
509
    display="chip"
510
    placeholder="Select items..."
511
    filter
512
    filterPlaceholder="Search..."
513
  />
514
</template>
515

516
<script setup>
517
import { ref } from 'vue';
518
import TreeSelect from 'primevue/treeselect';
519

520
const selectedNodes = ref([]);
521
const treeData = ref([
522
  {
523
    key: '1',
524
    label: 'Documents',
525
    children: [
526
      { key: '1-1', label: 'Work', data: 'Work Folder' },
527
      { key: '1-2', label: 'Home', data: 'Home Folder' }
528
    ]
529
  },
530
  {
531
    key: '2',
532
    label: 'Pictures',
533
    children: [
534
      { key: '2-1', label: 'Vacation', data: 'Vacation Photos' },
535
      { key: '2-2', label: 'Family', data: 'Family Photos' }
536
    ]
537
  }
538
]);
539
</script>
540
```
541

542
#### Checkbox
543
Single checkbox control with binary and array binding support.
544

545
```typescript { .api }
546
/**
547
 * Checkbox control for binary or array values
548
 */
549
import Checkbox from "primevue/checkbox";
550

551
interface CheckboxProps extends BaseComponentProps {
552
  modelValue?: any;
553
  value?: any;
554
  name?: string;
555
  binary?: boolean;
556
  disabled?: boolean;
557
  readonly?: boolean;
558
  required?: boolean;
559
  tabindex?: number;
560
  trueValue?: any;
561
  falseValue?: any;
562
  invalid?: boolean;
563
  variant?: "filled" | "outlined";
564
}
565
```
566

567
**Usage Example:**
568

569
```vue
570
<template>
571
  <!-- Binary checkbox -->
572
  <Checkbox v-model="checked" binary />
573
  
574
  <!-- Array binding -->
575
  <div class="flex flex-wrap gap-3">
576
    <div class="flex align-items-center">
577
      <Checkbox v-model="categories" inputId="category1" name="category" value="Technology" />
578
      <label for="category1" class="ml-2">Technology</label>
579
    </div>
580
    <div class="flex align-items-center">
581
      <Checkbox v-model="categories" inputId="category2" name="category" value="Finance" />
582
      <label for="category2" class="ml-2">Finance</label>
583
    </div>
584
  </div>
585
</template>
586
```
587

588
#### RadioButton
589
Radio button for exclusive selection within groups.
590

591
```typescript { .api }
592
/**
593
 * Radio button for exclusive selection
594
 */
595
import RadioButton from "primevue/radiobutton";
596

597
interface RadioButtonProps extends BaseComponentProps {
598
  modelValue?: any;
599
  value?: any;
600
  name?: string;
601
  disabled?: boolean;
602
  readonly?: boolean;
603
  required?: boolean;
604
  tabindex?: number;
605
  invalid?: boolean;
606
  variant?: "filled" | "outlined";
607
}
608
```
609

610
#### ToggleButton
611
Toggle button control for binary state with custom labels.
612

613
```typescript { .api }
614
/**
615
 * Toggle button for binary state with custom labels
616
 */
617
import ToggleButton from "primevue/togglebutton";
618

619
interface ToggleButtonProps extends BaseComponentProps {
620
  modelValue?: boolean;
621
  onIcon?: string;
622
  offIcon?: string;
623
  onLabel?: string;
624
  offLabel?: string;
625
  iconPos?: "left" | "right";
626
  disabled?: boolean;
627
  readonly?: boolean;
628
  tabindex?: number;
629
  invalid?: boolean;
630
}
631
```
632

633
### Date & Time Components
634

635
#### DatePicker
636
Modern date/time picker with extensive configuration options.
637

638
```typescript { .api }
639
/**
640
 * Modern date/time picker (replaces Calendar)
641
 */
642
import DatePicker from "primevue/datepicker";
643

644
interface DatePickerProps extends BaseComponentProps {
645
  modelValue?: Date | Date[];
646
  selectionMode?: "single" | "multiple" | "range";
647
  dateFormat?: string;
648
  inline?: boolean;
649
  showOtherMonths?: boolean;
650
  selectOtherMonths?: boolean;
651
  showIcon?: boolean;
652
  iconDisplay?: "input" | "button";
653
  icon?: string;
654
  previousIcon?: string;
655
  nextIcon?: string;
656
  incrementIcon?: string;
657
  decrementIcon?: string;
658
  numberOfMonths?: number;
659
  responsiveOptions?: object[];
660
  view?: "date" | "month" | "year";
661
  minDate?: Date;
662
  maxDate?: Date;
663
  disabledDates?: Date[];
664
  disabledDays?: number[];
665
  maxDateCount?: number;
666
  hideOnDateTimeSelect?: boolean;  
667
  showTime?: boolean;
668
  timeOnly?: boolean;
669
  hourFormat?: "12" | "24";
670
  stepHour?: number;
671
  stepMinute?: number;
672
  stepSecond?: number;
673
  showSeconds?: boolean;
674
  showMillisec?: boolean;
675
  placeholder?: string;
676
  disabled?: boolean;
677
  invalid?: boolean;
678
  readonly?: boolean;
679
  appendTo?: string;
680
}
681
```
682

683
**Usage Example:**
684

685
```vue
686
<template>
687
  <!-- Basic date picker -->
688
  <DatePicker v-model="date" />
689
  
690
  <!-- Date range picker -->
691
  <DatePicker v-model="dates" selectionMode="range" />
692
  
693
  <!-- Date time picker -->
694
  <DatePicker v-model="datetime" showTime hourFormat="24" />
695
  
696
  <!-- Inline calendar -->
697
  <DatePicker v-model="date" inline />
698
</template>
699
```
700

701
### Advanced Input Components
702

703
#### ColorPicker
704
Color selection widget with multiple formats.
705

706
```typescript { .api }
707
/**
708
 * Color picker with multiple format support
709
 */
710
import ColorPicker from "primevue/colorpicker";
711

712
interface ColorPickerProps extends BaseComponentProps {
713
  modelValue?: string;
714
  defaultColor?: string;
715
  inline?: boolean;
716
  format?: "hex" | "rgb" | "hsb";
717
  disabled?: boolean;
718
  tabindex?: number;
719
  autoZIndex?: boolean;
720
  baseZIndex?: number;
721
  appendTo?: string;
722
}
723
```
724

725
#### Knob
726
Circular range input with visual feedback.
727

728
```typescript { .api }
729
/**
730
 * Circular range input component
731
 */
732
import Knob from "primevue/knob";
733

734
interface KnobProps extends BaseComponentProps {
735
  modelValue?: number;
736
  size?: number;
737
  disabled?: boolean;
738
  readonly?: boolean;
739
  step?: number;
740
  min?: number;
741
  max?: number;
742
  valueColor?: string;
743
  rangeColor?: string;
744
  textColor?: string;
745
  strokeWidth?: number;
746
  showValue?: boolean;
747
  valueTemplate?: string;
748
  tabindex?: number;
749
}
750
```
751

752
#### Rating
753
Star rating input component.
754

755
```typescript { .api }
756
/**
757
 * Star rating input component
758
 */
759
import Rating from "primevue/rating";
760

761
interface RatingProps extends BaseComponentProps {
762
  modelValue?: number;
763
  disabled?: boolean;
764
  readonly?: boolean;
765
  stars?: number;
766
  cancel?: boolean;
767
  onIcon?: string;
768
  offIcon?: string;
769
  cancelIcon?: string;
770
}
771
```
772

773
#### Slider
774
Range slider input for numeric values.
775

776
```typescript { .api }
777
/**
778
 * Range slider for numeric value selection
779
 */
780
import Slider from "primevue/slider";
781

782
interface SliderProps extends BaseComponentProps {
783
  modelValue?: number | number[];
784
  min?: number;
785
  max?: number;
786
  orientation?: "horizontal" | "vertical";
787
  step?: number;
788
  range?: boolean;
789
  disabled?: boolean;
790
  readonly?: boolean;
791
  tabindex?: number;
792
}
793
```
794

795
### File Upload Components
796

797
#### FileUpload
798
Advanced file upload with drag-drop, progress tracking, and validation.
799

800
```typescript { .api }
801
/**
802
 * Advanced file upload component with drag-drop support
803
 */
804
import FileUpload from "primevue/fileupload";
805

806
interface FileUploadProps extends BaseComponentProps {
807
  name?: string;
808
  url?: string;
809
  mode?: "advanced" | "basic";
810
  multiple?: boolean;
811
  accept?: string;
812
  disabled?: boolean;
813
  auto?: boolean;
814
  maxFileSize?: number;
815
  invalidFileSizeMessage?: string;
816
  invalidFileTypeMessage?: string;
817
  fileLimit?: number;
818
  invalidFileLimitMessage?: string;
819
  withCredentials?: boolean;
820
  previewWidth?: number;
821
  chooseLabel?: string;
822
  uploadLabel?: string;
823
  cancelLabel?: string;
824
  customUpload?: boolean;
825
  showUploadButton?: boolean;
826
  showCancelButton?: boolean;
827
  chooseIcon?: string;
828
  uploadIcon?: string;
829
  cancelIcon?: string;
830
  style?: any;
831
  class?: string;
832
}
833
```
834

835
**Usage Example:**
836

837
```vue
838
<template>
839
  <FileUpload
840
    name="demo[]"
841
    url="/api/upload"
842
    :multiple="true"
843
    accept="image/*"
844
    :maxFileSize="1000000"
845
    @upload="onAdvancedUpload"
846
    @select="onSelect"
847
  >
848
    <template #empty>
849
      <p>Drag and drop files to here to upload.</p>
850
    </template>
851
  </FileUpload>
852
</template>
853
```
854

855
### Input Enhancement Components
856

857
#### InputChips
858
Multiple value input displayed as removable chips.
859

860
```typescript { .api }
861
/**
862
 * Multiple value input as removable chips
863
 */
864
import InputChips from "primevue/inputchips";
865

866
interface InputChipsProps extends BaseComponentProps {
867
  modelValue?: any[];
868
  max?: number;
869
  separator?: string | RegExp;
870
  addOnBlur?: boolean;
871
  allowDuplicate?: boolean;
872
  placeholder?: string;
873
  disabled?: boolean;
874
  invalid?: boolean;
875
  readonly?: boolean;
876
}
877
```
878

879
#### Chips
880
Individual chip component for displaying tags and labels with removal capability.
881

882
```typescript { .api }
883
/**
884
 * Individual chip component for tags and labels
885
 */
886
import Chips from "primevue/chips";
887

888
interface ChipsProps extends BaseComponentProps {
889
  modelValue?: any[];
890
  max?: number;
891
  separator?: string | RegExp;
892
  addOnBlur?: boolean;
893
  allowDuplicate?: boolean;
894
  placeholder?: string;
895
  disabled?: boolean;
896
  invalid?: boolean;
897
  readonly?: boolean;
898
  removable?: boolean;
899
  chipProps?: object;
900
}
901
```
902

903
**Usage Example:**
904

905
```vue
906
<template>
907
  <Chips
908
    v-model="tags"
909
    placeholder="Add tags..."
910
    :max="5"
911
    separator=","
912
    addOnBlur
913
  />
914
</template>
915

916
<script setup>
917
import { ref } from 'vue';
918
import Chips from 'primevue/chips';
919

920
const tags = ref(['vue', 'primevue', 'typescript']);
921
</script>
922
```
923

924
#### InputOtp
925
One-time password input with multiple character slots.
926

927
```typescript { .api }
928
/**
929
 * One-time password input component
930
 */
931
import InputOtp from "primevue/inputotp";
932

933
interface InputOtpProps extends BaseComponentProps {
934
  modelValue?: string | number;
935
  invalid?: boolean;
936
  disabled?: boolean;
937
  readonly?: boolean;
938
  variant?: "filled" | "outlined";
939
  mask?: boolean;
940
  integerOnly?: boolean;
941
  length?: number;
942
}
943
```
944

945
## Types
946

947
Form-specific type definitions:
948

949
```typescript { .api }
950
// File upload event types
951
interface FileUploadSelectEvent {
952
  originalEvent: Event;
953
  files: File[];
954
}
955

956
interface FileUploadUploadEvent {
957
  originalEvent: Event;
958
  files: File[];
959
}
960

961
interface FileUploadErrorEvent {
962
  originalEvent: Event;
963
  files: File[];
964
}
965

966
// Date picker types
967
type DatePickerDateType = Date | Date[] | undefined;
968

969
interface DatePickerMonthChangeEvent {
970
  month: number;
971
  year: number;
972
}
973

974
interface DatePickerYearChangeEvent {
975
  month: number;
976
  year: number;
977
}
978

979
// Input validation types
980
interface InputValidationState {
981
  invalid?: boolean;
982
  errorMessage?: string;
983
}
984
```