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...

Password box

Input type of password.

      Loading...

20.4.0

Textarea with character count

Show character count.

      Loading...

Three sizes of Input

There are three sizes of an Input box: large (40px)、default (32px) and small (24px).

      Loading...

http://.com

Http://

.com

http://.com

cascader

Pre / Post tab

Using pre & post tabs example.

      Loading...

https://

Search box

Example of creating a search box by grouping a standard input with a search button.

      Loading...

20.4.0

TextArea

For multi-line input.

      Loading...

With Formatter (Uppercase)

With Disabled

With Length (8)

With custom display character

OTP

One time password input.

      Loading...

¥RMB

prefix and suffix

Add prefix or suffix icons inside input.

      Loading...

With clear icon

Input with clear icon.

      Loading...

20.4.0

Status

Add status to Input with nzStatus, which could be error or warning.

      Loading...

API#

[nz-input]directive#

All props of input supported by w3c standards and Angular can used in [nz-input].

Property	Description	Type	Default	Version
`[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`~~
`[nzVariant]`	Variants of Input	`'outlined' \| 'borderless' \| 'filled' \| 'underlined'`	`'outlined'`	20.0.0
`[nzStatus]`	Set validation status	`'error' \| 'warning'`	-
~~`[nzStepperless]`~~	~~Whether hide stepper when input type is number~~	~~`boolean`~~	~~`true`~~

nz-input-wrappercomponent#

Use when you need to add extra functionality to [nz-input].

Property	Description	Type	Default
`[nzAddonBefore]`	The label text displayed before (on the left side of) the input field	`string`	-
`[nzAddonAfter]`	The label text displayed after (on the right side of) the input field	`string`	-
`[nzPrefix]`	The prefix icon for the Input	`string`	-
`[nzSuffix]`	The suffix icon for the Input	`string`	-
`[nzAllowClear]`	If allow to remove input content with clear icon	`boolean`	`false`
`(nzClear)`	Event emitted when the clear icon is clicked	`OutputEmitterRef<void>`	-

nz-input-passwordcomponent#

All properties of nz-input-wrapper can be used.

Property	Description	Type	Default
`[nzVisibilityToggle]`	Whether to show the toggle button	`boolean`	`true`
`[nzVisible]`	Whether the password is visible, supports two-way binding	`boolean`	`false`
`(nzVisibleChange)`	Event emitted when the visibility of the password changes	`OutputEmitterRef<boolean>`	-

nz-input-searchcomponent#

All properties of nz-input-wrapper can be used.

Property	Description	Type	Default
`[nzEnterButton]`	false displays the default button color, true uses the primary color, or you can provide a custom button. Conflicts with `nzAddonAfter`.	`boolean \| string`	`false`
`[nzLoading]`	Search box with loading	`boolean`	`false`
`(nzSearch)`	The event triggered when you click on the search-icon, the clear-icon or press the Enter key	`{ value: string, event: Event, source: 'clear' \| 'input' }`

nz-input-groupcomponent#

⚠️ nz-input-group has been deprecated in v20.0.0 and will be removed in v22.0.0. Please use the nz-input-wrapper component instead.

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>`	-
`[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-countcomponent#

Property	Description	Type	Default
`[nzMaxCharacterCount]`	`textarea` maximum character count displayed	`number`	-
`[nzComputeCharacterCount]`	customized `characterCount` computation function	`(v: string) => number`	`v => v.length`

nz-input-otpcomponent#

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'`

Q&A#

How to use compact input group?#

nz-input-group is no longer support compact mode directly in v20, you can use nz-space-compact instead.