NG-ZORROInput
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
When To Use#
- A user input in a form field is needed.
- A search input is required.
import { NzInputModule } from 'ng-zorro-antd/input';Examples
Basic usage example.
Loading...
Using pre & post tabs example.
Loading...
Example of creating a search box by grouping a standard input with a search button.
Loading...
nzAutosize prop for a textarea type of nz-input makes the height to automatically adjust based on the content.
An options object can be provided to nzAutosize to specify the minimum and maximum number of lines the textarea will automatically adjust.
Loading...
Add prefix or suffix icons inside input.
Loading...
Input with clear icon.
Loading...
Show character count.
Loading...
With Formatter (Uppercase)
With Disabled
With Length (8)
With custom display character
One time password input.
Loading...
There are three sizes of an Input box: large (40px)、default (32px) and small (24px).
Note: Inside of forms, only the large size is used.
Loading...
Input.Group example
Note: You don't need nz-col to control the width in the nzCompact mode.
Warning: This usage is deprecated in v19, please use <nz-space> or <nz-space-compact> components to achieve the same effect.
Loading...
For multi-line input.
Loading...
You can use the Input in conjunction with Tooltip component to create a Numeric Input, which can provide a good experience for extra-long content display.
Loading...
Input type of password.
Loading...
Borderless input.
Loading...
Add status to Input with nzStatus, which could be error or warning.
Loading...
API#
[nz-input]#
All props of input supported by w3c standards and Angular can used in nz-input.
| Property | Description | Type | Default |
|---|---|---|---|
[nzSize] | The size of the input box. Note: in the context of a form, the large size is used. | 'large' | 'small' | 'default' | 'default' |
[nzAutosize] | Only used for textarea, height autosize feature, can be set to boolean or an object { minRows: 2, maxRows: 6 } | boolean | { minRows: number, maxRows: number } | false |
[nzBorderless] | Whether hide border | boolean | false |
[nzStatus] | Set validation status | 'error' | 'warning' | - |
[nzStepperless] | Whether hide stepper when input type is number | 'boolean' | 'true' | - |
nz-input-group#
| Property | Description | Type | Default |
|---|---|---|---|
[nzAddOnAfter] | The label text displayed after (on the right side of) the input field, can work with nzAddOnBefore | string | TemplateRef<void> | - |
[nzAddOnBefore] | The label text displayed before (on the left side of) the input field, can work with nzAddOnAfter | string | TemplateRef<void> | - |
[nzPrefix] | The prefix icon for the Input, can work with nzSuffix | string | TemplateRef<void> | - |
[nzSuffix] | The suffix icon for the Input, can work with nzPrefix | string | TemplateRef<void> | - |
[nzCompact] | Whether use compact style | boolean | false |
[nzSize] | The size of nz-input-group specifies the size of the included nz-input fields | 'large' | 'small' | 'default' | 'default' |
[nzStatus] | Set validation status | 'error' | 'warning' | - |
nz-textarea-count#
| Property | Description | Type | Default |
|---|---|---|---|
[nzMaxCharacterCount] | textarea maximum character count displayed | number | - |
[nzComputeCharacterCount] | customized characterCount computation function | (v: string) => number | v => v.length |
nz-input-otp:standalone#
| Property | Description | Type | Default |
|---|---|---|---|
[disabled] | Whether the input is disabled | boolean | false |
[nzFormatter] | Format display, blank fields will be filled with | (value: string) => string | - |
[nzMask] | Custom display, the original value will not be modified | boolean | null | null |
[nzLength] | The number of input elements | number | 6 |
[nzStatus] | Set validation status | 'error' | 'warning' | - |
[nzSize] | The size of the input box | 'large' | 'small' | 'default' | default |