0
# Form Controls
1
2
PrimeNG provides 21 form control components for data input and selection, all supporting Angular reactive forms and template-driven forms.
3
4
## Text Input Components
5
6
### InputText
7
8
Basic text input enhancement directive.
9
10
```typescript { .api }
11
// Import
12
import { InputText } from 'primeng/inputtext';
13
// Module: InputTextModule
14
15
// Usage
16
@Component({
17
template: `<input type="text" pInputText [(ngModel)]="value" />`
18
})
19
```
20
21
### Textarea
22
23
Multi-line text input with auto-resize capability.
24
25
```typescript { .api }
26
// Import
27
import { Textarea } from 'primeng/textarea';
28
// Module: TextareaModule
29
30
// Component Interface
31
interface TextareaProps {
32
autoResize?: boolean;
33
rows?: number;
34
cols?: number;
35
}
36
37
// Usage
38
@Component({
39
template: `
40
<p-textarea
41
[(ngModel)]="description"
42
[autoResize]="true"
43
rows="4"
44
placeholder="Enter description">
45
</p-textarea>
46
`
47
})
48
```
49
50
### InputMask
51
52
Formatted text input with masking.
53
54
```typescript { .api }
55
// Import
56
import { InputMask } from 'primeng/inputmask';
57
// Module: InputMaskModule
58
59
// Component Interface
60
interface InputMaskProps {
61
mask?: string;
62
placeholder?: string;
63
slotChar?: string;
64
autoClear?: boolean;
65
showClear?: boolean;
66
readonly?: boolean;
67
disabled?: boolean;
68
}
69
70
// Usage
71
@Component({
72
template: `
73
<p-inputmask
74
mask="(999) 999-9999"
75
[(ngModel)]="phone"
76
placeholder="(999) 999-9999">
77
</p-inputmask>
78
`
79
})
80
```
81
82
### Password
83
84
Password input with strength meter and visibility toggle.
85
86
```typescript { .api }
87
// Import
88
import { Password } from 'primeng/password';
89
// Module: PasswordModule
90
91
// Component Interface
92
interface PasswordProps {
93
promptLabel?: string;
94
weakLabel?: string;
95
mediumLabel?: string;
96
strongLabel?: string;
97
feedback?: boolean;
98
toggleMask?: boolean;
99
showClear?: boolean;
100
}
101
102
// Usage
103
@Component({
104
template: `
105
<p-password
106
[(ngModel)]="password"
107
[feedback]="true"
108
[toggleMask]="true"
109
promptLabel="Enter password"
110
weakLabel="Too simple"
111
mediumLabel="Average complexity"
112
strongLabel="Complex password">
113
</p-password>
114
`
115
})
116
```
117
118
## Numeric Input Components
119
120
### InputNumber
121
122
Numeric input with formatting and locale support.
123
124
```typescript { .api }
125
// Import
126
import { InputNumber } from 'primeng/inputnumber';
127
// Module: InputNumberModule
128
129
// Component Interface
130
interface InputNumberProps {
131
format?: boolean;
132
showButtons?: boolean;
133
buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
134
step?: number;
135
min?: number;
136
max?: number;
137
minFractionDigits?: number;
138
maxFractionDigits?: number;
139
prefix?: string;
140
suffix?: string;
141
currency?: string;
142
currencyDisplay?: string;
143
locale?: string;
144
mode?: 'decimal' | 'currency' | 'percent';
145
}
146
147
// Usage
148
@Component({
149
template: `
150
<p-inputnumber
151
[(ngModel)]="price"
152
mode="currency"
153
currency="USD"
154
locale="en-US"
155
[min]="0"
156
[max]="1000000">
157
</p-inputnumber>
158
`
159
})
160
```
161
162
### Knob
163
164
Circular dial input for numeric values.
165
166
```typescript { .api }
167
// Import
168
import { Knob } from 'primeng/knob';
169
// Module: KnobModule
170
171
// Component Interface
172
interface KnobProps {
173
min?: number;
174
max?: number;
175
step?: number;
176
strokeWidth?: number;
177
size?: number;
178
valueColor?: string;
179
rangeColor?: string;
180
textColor?: string;
181
valueTemplate?: string;
182
readonly?: boolean;
183
disabled?: boolean;
184
showValue?: boolean;
185
}
186
187
// Usage
188
@Component({
189
template: `
190
<p-knob
191
[(ngModel)]="volume"
192
[min]="0"
193
[max]="100"
194
[size]="150"
195
valueTemplate="{value}%">
196
</p-knob>
197
`
198
})
199
```
200
201
### Slider
202
203
Range slider for numeric value selection.
204
205
```typescript { .api }
206
// Import
207
import { Slider } from 'primeng/slider';
208
// Module: SliderModule
209
210
// Component Interface
211
interface SliderProps {
212
min?: number;
213
max?: number;
214
orientation?: 'horizontal' | 'vertical';
215
step?: number;
216
range?: boolean;
217
animate?: boolean;
218
disabled?: boolean;
219
readonly?: boolean;
220
}
221
222
// Events
223
interface SliderChangeEvent {
224
event: Event;
225
value: number | number[];
226
}
227
228
// Usage
229
@Component({
230
template: `
231
<p-slider
232
[(ngModel)]="rangeValues"
233
[range]="true"
234
[min]="0"
235
[max]="100"
236
(onChange)="handleSliderChange($event)">
237
</p-slider>
238
`
239
})
240
```
241
242
## Selection Components
243
244
### Select (Dropdown)
245
246
Single selection dropdown with search and custom templates.
247
248
```typescript { .api }
249
// Import
250
import { Select } from 'primeng/select';
251
// Module: SelectModule
252
253
// Component Interface
254
interface SelectProps {
255
options?: SelectItem[];
256
optionLabel?: string;
257
optionValue?: string;
258
optionDisabled?: string;
259
optionGroupLabel?: string;
260
optionGroupChildren?: string;
261
filter?: boolean;
262
filterBy?: string;
263
filterPlaceholder?: string;
264
filterLocale?: string;
265
filterMatchMode?: string;
266
scrollHeight?: string;
267
placeholder?: string;
268
disabled?: boolean;
269
readonly?: boolean;
270
required?: boolean;
271
editable?: boolean;
272
showClear?: boolean;
273
loading?: boolean;
274
loadingIcon?: string;
275
}
276
277
// Events
278
interface SelectChangeEvent {
279
originalEvent: Event;
280
value: any;
281
}
282
283
// Usage
284
@Component({
285
template: `
286
<p-select
287
[options]="cities"
288
[(ngModel)]="selectedCity"
289
optionLabel="name"
290
optionValue="code"
291
[filter]="true"
292
filterBy="name"
293
placeholder="Select a City"
294
[showClear]="true"
295
(onChange)="onCitySelect($event)">
296
</p-select>
297
`
298
})
299
```
300
301
### MultiSelect
302
303
Multi-selection dropdown with chips display.
304
305
```typescript { .api }
306
// Import
307
import { MultiSelect } from 'primeng/multiselect';
308
// Module: MultiSelectModule
309
310
// Component Interface
311
interface MultiSelectProps {
312
options?: SelectItem[];
313
optionLabel?: string;
314
optionValue?: string;
315
optionDisabled?: string;
316
optionGroupLabel?: string;
317
optionGroupChildren?: string;
318
display?: 'comma' | 'chip';
319
selectedItemsLabel?: string;
320
maxSelectedLabels?: number;
321
selectionLimit?: number;
322
showToggleAll?: boolean;
323
filter?: boolean;
324
filterBy?: string;
325
filterPlaceholder?: string;
326
scrollHeight?: string;
327
placeholder?: string;
328
disabled?: boolean;
329
readonly?: boolean;
330
}
331
332
// Usage
333
@Component({
334
template: `
335
<p-multiselect
336
[options]="countries"
337
[(ngModel)]="selectedCountries"
338
optionLabel="name"
339
display="chip"
340
placeholder="Choose Countries"
341
[filter]="true"
342
[showToggleAll]="true"
343
[maxSelectedLabels]="3">
344
</p-multiselect>
345
`
346
})
347
```
348
349
### Listbox
350
351
Multi-selection list component.
352
353
```typescript { .api }
354
// Import
355
import { Listbox } from 'primeng/listbox';
356
// Module: ListboxModule
357
358
// Component Interface
359
interface ListboxProps {
360
options?: SelectItem[];
361
optionLabel?: string;
362
optionValue?: string;
363
optionDisabled?: string;
364
optionGroupLabel?: string;
365
optionGroupChildren?: string;
366
multiple?: boolean;
367
filter?: boolean;
368
filterBy?: string;
369
filterPlaceholder?: string;
370
filterLocale?: string;
371
filterMatchMode?: string;
372
scrollHeight?: string;
373
disabled?: boolean;
374
readonly?: boolean;
375
checkbox?: boolean;
376
}
377
378
// Usage
379
@Component({
380
template: `
381
<p-listbox
382
[options]="cities"
383
[(ngModel)]="selectedCities"
384
optionLabel="name"
385
[multiple]="true"
386
[checkbox]="true"
387
[filter]="true"
388
scrollHeight="250px">
389
</p-listbox>
390
`
391
})
392
```
393
394
### AutoComplete
395
396
Searchable input with suggestions.
397
398
```typescript { .api }
399
// Import
400
import { AutoComplete } from 'primeng/autocomplete';
401
// Module: AutoCompleteModule
402
403
// Component Interface
404
interface AutoCompleteProps {
405
suggestions?: any[];
406
field?: string;
407
scrollHeight?: string;
408
dropdown?: boolean;
409
multiple?: boolean;
410
minLength?: number;
411
delay?: number;
412
completeOnFocus?: boolean;
413
autoHighlight?: boolean;
414
forceSelection?: boolean;
415
type?: string;
416
disabled?: boolean;
417
readonly?: boolean;
418
placeholder?: string;
419
}
420
421
// Events
422
interface AutoCompleteCompleteEvent {
423
originalEvent: Event;
424
query: string;
425
}
426
427
interface AutoCompleteSelectEvent {
428
originalEvent: Event;
429
value: any;
430
}
431
432
// Usage
433
@Component({
434
template: `
435
<p-autocomplete
436
[(ngModel)]="selectedCountry"
437
[suggestions]="filteredCountries"
438
(completeMethod)="filterCountry($event)"
439
field="name"
440
[dropdown]="true"
441
placeholder="Search countries"
442
(onSelect)="onCountrySelect($event)">
443
</p-autocomplete>
444
`
445
})
446
```
447
448
## Boolean Input Components
449
450
### Checkbox
451
452
Boolean input control with tri-state support.
453
454
```typescript { .api }
455
// Import
456
import { Checkbox } from 'primeng/checkbox';
457
// Module: CheckboxModule
458
459
// Component Interface
460
interface CheckboxProps {
461
binary?: boolean;
462
label?: string;
463
disabled?: boolean;
464
readonly?: boolean;
465
required?: boolean;
466
trueValue?: any;
467
falseValue?: any;
468
}
469
470
// Events
471
interface CheckboxChangeEvent {
472
originalEvent: Event;
473
checked: boolean;
474
}
475
476
// Usage
477
@Component({
478
template: `
479
<p-checkbox
480
[(ngModel)]="accepted"
481
[binary]="true"
482
label="Accept terms"
483
(onChange)="onAcceptChange($event)">
484
</p-checkbox>
485
`
486
})
487
```
488
489
### RadioButton
490
491
Single selection radio input.
492
493
```typescript { .api }
494
// Import
495
import { RadioButton } from 'primeng/radiobutton';
496
// Module: RadioButtonModule
497
498
// Component Interface
499
interface RadioButtonProps {
500
value?: any;
501
name?: string;
502
disabled?: boolean;
503
readonly?: boolean;
504
required?: boolean;
505
label?: string;
506
}
507
508
// Usage
509
@Component({
510
template: `
511
<div class="flex flex-wrap gap-3">
512
<div class="flex align-items-center">
513
<p-radiobutton
514
name="category"
515
value="A"
516
[(ngModel)]="selectedCategory" />
517
<label class="ml-2">Category A</label>
518
</div>
519
<div class="flex align-items-center">
520
<p-radiobutton
521
name="category"
522
value="B"
523
[(ngModel)]="selectedCategory" />
524
<label class="ml-2">Category B</label>
525
</div>
526
</div>
527
`
528
})
529
```
530
531
### ToggleButton
532
533
On/off toggle button.
534
535
```typescript { .api }
536
// Import
537
import { ToggleButton } from 'primeng/togglebutton';
538
// Module: ToggleButtonModule
539
540
// Component Interface
541
interface ToggleButtonProps {
542
onLabel?: string;
543
offLabel?: string;
544
onIcon?: string;
545
offIcon?: string;
546
disabled?: boolean;
547
readonly?: boolean;
548
}
549
550
// Usage
551
@Component({
552
template: `
553
<p-togglebutton
554
[(ngModel)]="checked"
555
onLabel="On"
556
offLabel="Off"
557
onIcon="pi pi-check"
558
offIcon="pi pi-times">
559
</p-togglebutton>
560
`
561
})
562
```
563
564
### ToggleSwitch
565
566
Switch-style toggle control.
567
568
```typescript { .api }
569
// Import
570
import { ToggleSwitch } from 'primeng/toggleswitch';
571
// Module: ToggleSwitchModule
572
573
// Component Interface
574
interface ToggleSwitchProps {
575
disabled?: boolean;
576
readonly?: boolean;
577
trueValue?: any;
578
falseValue?: any;
579
}
580
581
// Usage
582
@Component({
583
template: `
584
<p-toggleswitch
585
[(ngModel)]="switchValue"
586
[trueValue]="'yes'"
587
[falseValue]="'no'">
588
</p-toggleswitch>
589
`
590
})
591
```
592
593
## Specialized Selection Components
594
595
### TreeSelect
596
597
Hierarchical selection with tree structure.
598
599
```typescript { .api }
600
// Import
601
import { TreeSelect } from 'primeng/treeselect';
602
// Module: TreeSelectModule
603
604
// Component Interface
605
interface TreeSelectProps {
606
options?: TreeNode[];
607
placeholder?: string;
608
disabled?: boolean;
609
selectionMode?: 'single' | 'multiple' | 'checkbox';
610
display?: 'comma' | 'chip';
611
filter?: boolean;
612
filterBy?: string;
613
filterMode?: string;
614
filterPlaceholder?: string;
615
scrollHeight?: string;
616
resetFilterOnHide?: boolean;
617
showClear?: boolean;
618
}
619
620
// Usage
621
@Component({
622
template: `
623
<p-treeselect
624
[(ngModel)]="selectedNodes"
625
[options]="nodes"
626
selectionMode="multiple"
627
display="chip"
628
placeholder="Select Items"
629
[filter]="true"
630
filterBy="label">
631
</p-treeselect>
632
`
633
})
634
```
635
636
### SelectButton
637
638
Toggle button group for selection.
639
640
```typescript { .api }
641
// Import
642
import { SelectButton } from 'primeng/selectbutton';
643
// Module: SelectButtonModule
644
645
// Component Interface
646
interface SelectButtonProps {
647
options?: SelectItem[];
648
optionLabel?: string;
649
optionValue?: string;
650
optionDisabled?: string;
651
multiple?: boolean;
652
disabled?: boolean;
653
allowEmpty?: boolean;
654
}
655
656
// Usage
657
@Component({
658
template: `
659
<p-selectbutton
660
[options]="stateOptions"
661
[(ngModel)]="value"
662
optionLabel="label"
663
optionValue="value">
664
</p-selectbutton>
665
`
666
})
667
```
668
669
## Date and Time Components
670
671
### DatePicker
672
673
Calendar component for date/time selection.
674
675
```typescript { .api }
676
// Import
677
import { DatePicker } from 'primeng/datepicker';
678
// Module: DatePickerModule
679
680
// Component Interface
681
interface DatePickerProps {
682
selectionMode?: 'single' | 'multiple' | 'range';
683
dateFormat?: string;
684
inline?: boolean;
685
showOtherMonths?: boolean;
686
selectOtherMonths?: boolean;
687
showIcon?: boolean;
688
iconDisplay?: 'input' | 'button';
689
icon?: string;
690
numberOfMonths?: number;
691
view?: 'date' | 'month' | 'year';
692
touchUI?: boolean;
693
showTime?: boolean;
694
timeOnly?: boolean;
695
showSeconds?: boolean;
696
showMillisec?: boolean;
697
hourFormat?: '12' | '24';
698
stepHour?: number;
699
stepMinute?: number;
700
stepSecond?: number;
701
showButtonBar?: boolean;
702
todayButtonStyleClass?: string;
703
clearButtonStyleClass?: string;
704
minDate?: Date;
705
maxDate?: Date;
706
disabledDates?: Date[];
707
disabledDays?: number[];
708
yearRange?: string;
709
showWeek?: boolean;
710
disabled?: boolean;
711
readonly?: boolean;
712
placeholder?: string;
713
}
714
715
// Events
716
interface DatePickerSelectEvent {
717
originalEvent: Event;
718
value: Date | Date[];
719
}
720
721
// Usage
722
@Component({
723
template: `
724
<p-datepicker
725
[(ngModel)]="date"
726
[showIcon]="true"
727
[showButtonBar]="true"
728
dateFormat="mm/dd/yy"
729
placeholder="Select date"
730
(onSelect)="onDateSelect($event)">
731
</p-datepicker>
732
`
733
})
734
```
735
736
## Other Input Components
737
738
### ColorPicker
739
740
Color selection widget.
741
742
```typescript { .api }
743
// Import
744
import { ColorPicker } from 'primeng/colorpicker';
745
// Module: ColorPickerModule
746
747
// Component Interface
748
interface ColorPickerProps {
749
format?: 'hex' | 'rgb' | 'hsb';
750
inline?: boolean;
751
disabled?: boolean;
752
readonly?: boolean;
753
}
754
755
// Usage
756
@Component({
757
template: `
758
<p-colorpicker
759
[(ngModel)]="color"
760
format="hex"
761
[inline]="false">
762
</p-colorpicker>
763
`
764
})
765
```
766
767
### Rating
768
769
Star rating input component.
770
771
```typescript { .api }
772
// Import
773
import { Rating } from 'primeng/rating';
774
// Module: RatingModule
775
776
// Component Interface
777
interface RatingProps {
778
stars?: number;
779
cancel?: boolean;
780
disabled?: boolean;
781
readonly?: boolean;
782
}
783
784
// Events
785
interface RatingRateEvent {
786
originalEvent: Event;
787
value: number;
788
}
789
790
// Usage
791
@Component({
792
template: `
793
<p-rating
794
[(ngModel)]="rating"
795
[stars]="5"
796
[cancel]="true"
797
(onRate)="onRatingChange($event)">
798
</p-rating>
799
`
800
})
801
```
802
803
### InputOtp
804
805
One-time password input component.
806
807
```typescript { .api }
808
// Import
809
import { InputOtp } from 'primeng/inputotp';
810
// Module: InputOtpModule
811
812
// Component Interface
813
interface InputOtpProps {
814
length?: number;
815
mask?: boolean;
816
integerOnly?: boolean;
817
disabled?: boolean;
818
readonly?: boolean;
819
variant?: 'filled' | 'outlined';
820
}
821
822
// Usage
823
@Component({
824
template: `
825
<p-inputotp
826
[(ngModel)]="otpValue"
827
[length]="6"
828
[mask]="true"
829
[integerOnly]="true">
830
</p-inputotp>
831
`
832
})
833
```
834
835
## Form Integration
836
837
All PrimeNG form components support both reactive forms and template-driven forms:
838
839
```typescript
840
// Reactive Forms
841
export class ReactiveFormComponent {
842
form = this.fb.group({
843
name: ['', Validators.required],
844
email: ['', [Validators.required, Validators.email]],
845
country: [null, Validators.required],
846
cities: [[]],
847
birthDate: [null],
848
rating: [0]
849
});
850
851
constructor(private fb: FormBuilder) {}
852
}
853
854
// Template
855
@Component({
856
template: `
857
<form [formGroup]="form">
858
<input pInputText formControlName="name" />
859
<input pInputText formControlName="email" />
860
<p-select [options]="countries" formControlName="country" />
861
<p-multiselect [options]="cities" formControlName="cities" />
862
<p-datepicker formControlName="birthDate" />
863
<p-rating formControlName="rating" />
864
</form>
865
`
866
})
867
```