0
# Data Entry Components
1
2
Form controls and input components for collecting user data including buttons, inputs, selects, date pickers, and specialized form elements.
3
4
## Capabilities
5
6
### Button Component
7
8
Primary action component for user interactions with multiple styles, sizes, and states.
9
10
```typescript { .api }
11
/**
12
* Button component with various types and configurations
13
* Selector: button[nz-button], a[nz-button]
14
* Export As: nzButton
15
*/
16
interface NzButtonComponent {
17
/** Button type styling */
18
nzType: 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
19
/** Button shape */
20
nzShape: 'circle' | 'round' | null;
21
/** Button size */
22
nzSize: 'large' | 'default' | 'small';
23
/** Loading state with spinner */
24
nzLoading: boolean;
25
/** Ghost button style */
26
nzGhost: boolean;
27
/** Full width button */
28
nzBlock: boolean;
29
/** Danger button styling */
30
nzDanger: boolean;
31
/** Search button styling */
32
nzSearch: boolean;
33
/** Tab index for keyboard navigation */
34
tabIndex: number | string | null;
35
/** Button disabled state */
36
disabled: boolean;
37
}
38
39
// Module
40
class NzButtonModule {
41
static forRoot(): ModuleWithProviders<NzButtonModule>;
42
}
43
44
// Types
45
type NzButtonType = 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
46
type NzButtonShape = 'circle' | 'round' | null;
47
type NzButtonSize = NzSizeLDSType;
48
```
49
50
**Usage Examples:**
51
52
```typescript
53
import { NzButtonModule } from 'ng-zorro-antd/button';
54
55
@Component({
56
template: `
57
<!-- Primary button -->
58
<button nz-button nzType="primary">Primary</button>
59
60
<!-- Loading button -->
61
<button nz-button [nzLoading]="loading" (click)="loadData()">
62
Load Data
63
</button>
64
65
<!-- Icon button -->
66
<button nz-button nzShape="circle" nz-icon nzType="search"></button>
67
68
<!-- Block button -->
69
<button nz-button nzBlock nzType="primary">Full Width</button>
70
`
71
})
72
export class ButtonExampleComponent {}
73
```
74
75
### Input Component
76
77
Text input controls with validation, sizing, and various input types.
78
79
```typescript { .api }
80
/**
81
* Input directive for text inputs and textareas
82
* Selector: input[nz-input], textarea[nz-input]
83
*/
84
interface NzInputDirective {
85
/** Input size */
86
nzSize: 'large' | 'default' | 'small';
87
/** Validation status styling */
88
nzStatus: '' | 'error' | 'warning';
89
/** Input variant styling */
90
nzVariant: 'outlined' | 'borderless' | 'filled' | 'underlined';
91
/** @deprecated Use nzVariant instead */
92
nzBorderless: boolean;
93
/** Disable stepper for number inputs */
94
nzStepperless: boolean;
95
/** Disabled state */
96
disabled: boolean;
97
}
98
99
/**
100
* Input group component for combining inputs with addons
101
* Selector: nz-input-group
102
*/
103
interface NzInputGroupComponent {
104
/** Group size */
105
nzSize: 'large' | 'default' | 'small';
106
/** Compact styling */
107
nzCompact: boolean;
108
/** Search input styling */
109
nzSearch: boolean;
110
/** Prefix addon */
111
nzAddOnBefore: string | TemplateRef<void>;
112
/** Suffix addon */
113
nzAddOnAfter: string | TemplateRef<void>;
114
/** Prefix icon */
115
nzPrefixIcon: string | TemplateRef<void>;
116
/** Suffix icon */
117
nzSuffixIcon: string | TemplateRef<void>;
118
}
119
120
// Module
121
class NzInputModule {
122
static forRoot(): ModuleWithProviders<NzInputModule>;
123
}
124
```
125
126
**Usage Examples:**
127
128
```typescript
129
import { NzInputModule } from 'ng-zorro-antd/input';
130
131
@Component({
132
template: `
133
<!-- Basic input -->
134
<input nz-input placeholder="Enter text" [(ngModel)]="inputValue" />
135
136
<!-- Input with status -->
137
<input nz-input nzStatus="error" placeholder="Error state" />
138
139
<!-- Input group with addons -->
140
<nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com">
141
<input type="text" nz-input placeholder="mysite" />
142
</nz-input-group>
143
144
<!-- Input with prefix icon -->
145
<nz-input-group [nzPrefixIcon]="userIcon">
146
<input nz-input placeholder="Username" />
147
</nz-input-group>
148
`
149
})
150
export class InputExampleComponent {}
151
```
152
153
### Select Component
154
155
Dropdown selection component with single and multiple selection modes.
156
157
```typescript { .api }
158
/**
159
* Select component for dropdown selections
160
* Selector: nz-select
161
*/
162
interface NzSelectComponent {
163
/** Selection mode */
164
nzMode: 'default' | 'multiple' | 'tags';
165
/** Selected value(s) */
166
ngModel: any;
167
/** Size of select */
168
nzSize: 'large' | 'default' | 'small';
169
/** Placeholder text */
170
nzPlaceHolder: string;
171
/** Disabled state */
172
nzDisabled: boolean;
173
/** Allow clear selection */
174
nzAllowClear: boolean;
175
/** Show search input */
176
nzShowSearch: boolean;
177
/** Loading state */
178
nzLoading: boolean;
179
/** Dropdown class name */
180
nzDropdownClassName: string;
181
/** Maximum selected tags to show */
182
nzMaxTagCount: number;
183
/** Custom filter function */
184
nzFilterOption: (input: string, option: NzOptionComponent) => boolean;
185
/** Server search function */
186
nzServerSearch: boolean;
187
/** Selection change event */
188
ngModelChange: EventEmitter<any>;
189
/** Open/close change event */
190
nzOpenChange: EventEmitter<boolean>;
191
}
192
193
/**
194
* Option component for select choices
195
* Selector: nz-option
196
*/
197
interface NzOptionComponent {
198
/** Option value */
199
nzValue: any;
200
/** Option label */
201
nzLabel: string;
202
/** Disabled option */
203
nzDisabled: boolean;
204
/** Hide option */
205
nzHide: boolean;
206
/** Custom option data */
207
nzCustomContent: boolean;
208
}
209
210
/**
211
* Option group component
212
* Selector: nz-option-group
213
*/
214
interface NzOptionGroupComponent {
215
/** Group label */
216
nzLabel: string | TemplateRef<void>;
217
}
218
219
// Module
220
class NzSelectModule {
221
static forRoot(): ModuleWithProviders<NzSelectModule>;
222
}
223
```
224
225
**Usage Examples:**
226
227
```typescript
228
import { NzSelectModule } from 'ng-zorro-antd/select';
229
230
@Component({
231
template: `
232
<!-- Basic select -->
233
<nz-select nzPlaceHolder="Choose option" [(ngModel)]="selectedValue">
234
<nz-option nzValue="option1" nzLabel="Option 1"></nz-option>
235
<nz-option nzValue="option2" nzLabel="Option 2"></nz-option>
236
</nz-select>
237
238
<!-- Multiple select -->
239
<nz-select nzMode="multiple" nzPlaceHolder="Select multiple" [(ngModel)]="multipleValues">
240
<nz-option nzValue="a" nzLabel="Option A"></nz-option>
241
<nz-option nzValue="b" nzLabel="Option B"></nz-option>
242
</nz-select>
243
244
<!-- Select with search -->
245
<nz-select nzShowSearch nzPlaceHolder="Search and select">
246
<nz-option *ngFor="let option of options" [nzValue]="option.value" [nzLabel]="option.label">
247
</nz-option>
248
</nz-select>
249
`
250
})
251
export class SelectExampleComponent {}
252
```
253
254
### Checkbox Component
255
256
Checkbox input for boolean selections and multi-selection scenarios.
257
258
```typescript { .api }
259
/**
260
* Checkbox component
261
* Selector: [nz-checkbox]
262
*/
263
interface NzCheckboxComponent {
264
/** Checked state */
265
ngModel: boolean;
266
/** Indeterminate state */
267
nzIndeterminate: boolean;
268
/** Disabled state */
269
nzDisabled: boolean;
270
/** Auto focus */
271
nzAutoFocus: boolean;
272
/** Checkbox value for groups */
273
nzValue: any;
274
/** Change event */
275
ngModelChange: EventEmitter<boolean>;
276
}
277
278
/**
279
* Checkbox group component
280
* Selector: nz-checkbox-group
281
*/
282
interface NzCheckboxGroupComponent {
283
/** Group options */
284
nzOptions: NzCheckboxOptionInterface[];
285
/** Disabled state */
286
nzDisabled: boolean;
287
/** Group value */
288
ngModel: any[];
289
/** Change event */
290
ngModelChange: EventEmitter<any[]>;
291
}
292
293
/**
294
* Checkbox wrapper component
295
* Selector: nz-checkbox-wrapper
296
*/
297
interface NzCheckboxWrapperComponent {
298
/** Change event */
299
nzOnChange: EventEmitter<any[]>;
300
}
301
302
// Types
303
interface NzCheckboxOptionInterface {
304
label: string;
305
value: any;
306
checked?: boolean;
307
disabled?: boolean;
308
}
309
310
// Module
311
class NzCheckboxModule {
312
static forRoot(): ModuleWithProviders<NzCheckboxModule>;
313
}
314
```
315
316
### Radio Component
317
318
Radio button component for single selection from multiple options.
319
320
```typescript { .api }
321
/**
322
* Radio component
323
* Selector: [nz-radio]
324
*/
325
interface NzRadioComponent {
326
/** Checked state */
327
ngModel: boolean;
328
/** Radio value */
329
nzValue: any;
330
/** Disabled state */
331
nzDisabled: boolean;
332
/** Auto focus */
333
nzAutoFocus: boolean;
334
/** Change event */
335
ngModelChange: EventEmitter<boolean>;
336
}
337
338
/**
339
* Radio group component
340
* Selector: nz-radio-group
341
*/
342
interface NzRadioGroupComponent {
343
/** Group value */
344
ngModel: any;
345
/** Disabled state */
346
nzDisabled: boolean;
347
/** Button style */
348
nzButtonStyle: 'outline' | 'solid';
349
/** Group name */
350
nzName: string;
351
/** Group size */
352
nzSize: 'large' | 'default' | 'small';
353
/** Change event */
354
ngModelChange: EventEmitter<any>;
355
}
356
357
/**
358
* Radio button component
359
* Selector: [nz-radio-button]
360
*/
361
interface NzRadioButtonComponent {
362
/** Radio value */
363
nzValue: any;
364
/** Disabled state */
365
nzDisabled: boolean;
366
}
367
368
// Module
369
class NzRadioModule {
370
static forRoot(): ModuleWithProviders<NzRadioModule>;
371
}
372
```
373
374
### Date Picker Component
375
376
Date and time selection components with calendar interface.
377
378
```typescript { .api }
379
/**
380
* Date picker component
381
* Selector: nz-date-picker
382
*/
383
interface NzDatePickerComponent {
384
/** Selected date */
385
ngModel: Date | null;
386
/** Date format */
387
nzFormat: string;
388
/** Placeholder text */
389
nzPlaceHolder: string;
390
/** Size */
391
nzSize: 'large' | 'default' | 'small';
392
/** Disabled state */
393
nzDisabled: boolean;
394
/** Allow clear */
395
nzAllowClear: boolean;
396
/** Auto focus */
397
nzAutoFocus: boolean;
398
/** Show time picker */
399
nzShowTime: boolean | object;
400
/** Show today button */
401
nzShowToday: boolean;
402
/** Disabled date function */
403
nzDisabledDate: (current: Date) => boolean;
404
/** Change event */
405
ngModelChange: EventEmitter<Date>;
406
/** Open/close change event */
407
nzOnOpenChange: EventEmitter<boolean>;
408
}
409
410
/**
411
* Range picker component
412
* Selector: nz-range-picker
413
*/
414
interface NzRangePickerComponent {
415
/** Selected date range */
416
ngModel: [Date, Date] | null;
417
/** Date format */
418
nzFormat: string;
419
/** Placeholder text array */
420
nzPlaceHolder: string[];
421
/** Size */
422
nzSize: 'large' | 'default' | 'small';
423
/** Separator */
424
nzSeparator: string;
425
/** Show time picker */
426
nzShowTime: boolean | object;
427
/** Change event */
428
ngModelChange: EventEmitter<[Date, Date]>;
429
}
430
431
// Module
432
class NzDatePickerModule {
433
static forRoot(): ModuleWithProviders<NzDatePickerModule>;
434
}
435
```
436
437
### Form Components
438
439
Form layout and validation components for structured data collection.
440
441
```typescript { .api }
442
/**
443
* Form directive
444
* Selector: [nz-form]
445
*/
446
interface NzFormDirective {
447
/** Form layout */
448
nzLayout: 'horizontal' | 'vertical' | 'inline';
449
/** Auto tips for validation */
450
nzAutoTips: Record<string, Record<string, string>>;
451
/** Disable auto tips */
452
nzDisableAutoTips: boolean;
453
}
454
455
/**
456
* Form item component
457
* Selector: nz-form-item
458
*/
459
interface NzFormItemComponent {
460
/** Flex layout */
461
nzFlex: boolean;
462
}
463
464
/**
465
* Form label component
466
* Selector: nz-form-label
467
*/
468
interface NzFormLabelComponent {
469
/** Required marker */
470
nzRequired: boolean;
471
/** Label text */
472
nzFor: string;
473
/** Flex span */
474
nzSpan: number;
475
/** Flex offset */
476
nzOffset: number;
477
/** Tooltip info */
478
nzTooltipTitle: string | TemplateRef<void>;
479
/** Tooltip icon */
480
nzTooltipIcon: string | TemplateRef<void>;
481
}
482
483
/**
484
* Form control component
485
* Selector: nz-form-control
486
*/
487
interface NzFormControlComponent {
488
/** Validation status */
489
nzValidateStatus: 'success' | 'warning' | 'error' | 'validating' | '';
490
/** Error tip */
491
nzErrorTip: string | TemplateRef<void>;
492
/** Warning tip */
493
nzWarningTip: string | TemplateRef<void>;
494
/** Success tip */
495
nzSuccessTip: string | TemplateRef<void>;
496
/** Validating tip */
497
nzValidatingTip: string | TemplateRef<void>;
498
/** Extra information */
499
nzExtra: string | TemplateRef<void>;
500
/** Has feedback icon */
501
nzHasFeedback: boolean;
502
/** Auto tips */
503
nzAutoTips: Record<string, Record<string, string>>;
504
/** Disable auto tips */
505
nzDisableAutoTips: boolean;
506
/** Flex span */
507
nzSpan: number;
508
/** Flex offset */
509
nzOffset: number;
510
}
511
512
// Module
513
class NzFormModule {
514
static forRoot(): ModuleWithProviders<NzFormModule>;
515
}
516
```
517
518
**Usage Examples:**
519
520
```typescript
521
import { NzFormModule } from 'ng-zorro-antd/form';
522
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
523
524
@Component({
525
template: `
526
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
527
<nz-form-item>
528
<nz-form-label [nzSpan]="6" nzRequired nzFor="email">Email</nz-form-label>
529
<nz-form-control [nzSpan]="14" nzErrorTip="Please input your email!">
530
<input id="email" formControlName="email" nz-input />
531
</nz-form-control>
532
</nz-form-item>
533
534
<nz-form-item>
535
<nz-form-label [nzSpan]="6" nzRequired nzFor="password">Password</nz-form-label>
536
<nz-form-control [nzSpan]="14" nzErrorTip="Please input your password!">
537
<input id="password" formControlName="password" type="password" nz-input />
538
</nz-form-control>
539
</nz-form-item>
540
541
<nz-form-item>
542
<nz-form-control [nzSpan]="14" [nzOffset]="6">
543
<button nz-button nzType="primary">Submit</button>
544
</nz-form-control>
545
</nz-form-item>
546
</form>
547
`
548
})
549
export class FormExampleComponent {
550
validateForm: FormGroup;
551
552
constructor(private fb: FormBuilder) {
553
this.validateForm = this.fb.group({
554
email: ['', [Validators.email, Validators.required]],
555
password: ['', [Validators.required]]
556
});
557
}
558
}
559
```
560
561
### Switch Component
562
563
Toggle switch for boolean state changes.
564
565
```typescript { .api }
566
/**
567
* Switch component
568
* Selector: nz-switch
569
*/
570
interface NzSwitchComponent {
571
/** Switch state */
572
ngModel: boolean;
573
/** Disabled state */
574
nzDisabled: boolean;
575
/** Loading state */
576
nzLoading: boolean;
577
/** Size */
578
nzSize: 'default' | 'small';
579
/** Checked text */
580
nzCheckedChildren: string | TemplateRef<void>;
581
/** Unchecked text */
582
nzUnCheckedChildren: string | TemplateRef<void>;
583
/** Control switch by click */
584
nzControl: boolean;
585
/** Change event */
586
ngModelChange: EventEmitter<boolean>;
587
}
588
589
// Module
590
class NzSwitchModule {
591
static forRoot(): ModuleWithProviders<NzSwitchModule>;
592
}
593
```
594
595
### Upload Component
596
597
File upload component with drag & drop support and progress tracking.
598
599
```typescript { .api }
600
/**
601
* Upload component
602
* Selector: nz-upload
603
*/
604
interface NzUploadComponent {
605
/** Upload type */
606
nzType: 'select' | 'drag';
607
/** Accept file types */
608
nzAccept: string;
609
/** Upload action URL */
610
nzAction: string | ((file: NzUploadFile) => string | Observable<string>);
611
/** Upload directory */
612
nzDirectory: boolean;
613
/** Before upload hook */
614
nzBeforeUpload: (file: NzUploadFile, fileList: NzUploadFile[]) => boolean | Observable<boolean>;
615
/** Custom request */
616
nzCustomRequest: (item: NzUploadXHRArgs) => Subscription;
617
/** Upload data */
618
nzData: {} | ((file: NzUploadFile) => {} | Observable<{}>);
619
/** Disabled state */
620
nzDisabled: boolean;
621
/** File list */
622
nzFileList: NzUploadFile[];
623
/** Limit file count */
624
nzLimit: number;
625
/** Multiple selection */
626
nzMultiple: boolean;
627
/** File name */
628
nzName: string;
629
/** Show upload list */
630
nzShowUploadList: boolean | NzShowUploadList;
631
/** File list type */
632
nzListType: 'text' | 'picture' | 'picture-card';
633
/** Filters */
634
nzFilter: NzUploadFilter[];
635
/** File size limit */
636
nzSize: number;
637
/** Support file types */
638
nzFileType: string;
639
/** Upload headers */
640
nzHeaders: {} | ((file: NzUploadFile) => {} | Observable<{}>);
641
/** With credentials */
642
nzWithCredentials: boolean;
643
/** Change event */
644
nzChange: EventEmitter<NzUploadChangeParam>;
645
/** File list change */
646
nzFileListChange: EventEmitter<NzUploadFile[]>;
647
}
648
649
// Types
650
interface NzUploadFile {
651
uid: string;
652
name: string;
653
status?: 'uploading' | 'done' | 'error' | 'removed';
654
response?: any;
655
linkProps?: any;
656
type?: string;
657
size?: number;
658
url?: string;
659
preview?: string;
660
thumbUrl?: string;
661
percent?: number;
662
originFileObj?: File;
663
}
664
665
interface NzUploadChangeParam {
666
file: NzUploadFile;
667
fileList: NzUploadFile[];
668
event?: { percent: number };
669
type?: string;
670
}
671
672
// Module
673
class NzUploadModule {
674
static forRoot(): ModuleWithProviders<NzUploadModule>;
675
}
676
```