Input

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.

expand codeexpand code
Loading...
Http://.com
Http://.com

Using pre & post tabs example.

expand codeexpand code
Loading...




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

expand codeexpand code
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.

expand codeexpand code
Loading...


RMB

Add prefix or suffix icons inside input.

expand codeexpand code
Loading...


Input with clear icon.

expand codeexpand code
Loading...

Show character count.

expand codeexpand code
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.

expand codeexpand code
Loading...


Zhejiang
Option1


Option1-1Option2-1
Between
Sign Up
Home
Please select

Input.Group example

Note: You don't need nz-col to control the width in the nzCompact mode.

expand codeexpand code
Loading...

For multi-line input.

expand codeexpand code
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.

expand codeexpand code
Loading...

Input type of password.

expand codeexpand code
Loading...

Borderless input.

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

API#

[nz-input]#

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

PropertyDescriptionTypeDefault
[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 borderbooleanfalse
[nzStatus]Set validation status'error' | 'warning'-
[nzStepperless]Whether hide stepper when input type is number'boolean' | 'true'-

nz-input-group#

PropertyDescriptionTypeDefault
[nzAddOnAfter]The label text displayed after (on the right side of) the input field, can work with nzAddOnBeforestring | TemplateRef<void>-
[nzAddOnBefore]The label text displayed before (on the left side of) the input field, can work with nzAddOnAfterstring | TemplateRef<void>-
[nzPrefix]The prefix icon for the Input, can work with nzSuffixstring | TemplateRef<void>-
[nzSuffix]The suffix icon for the Input, can work with nzPrefixstring | TemplateRef<void>-
[nzCompact]Whether use compact stylebooleanfalse
[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#

PropertyDescriptionTypeDefault
[nzMaxCharacterCount]textarea maximum character count displayednumber-
[nzComputeCharacterCount]customized characterCount computation function(v: string) => numberv => v.length