Input - Ant Design

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.

Examples

API

Common props ref：Common props

Input

Property	Description	Type	Default	Version
addonAfter	The label text displayed after (on the right side of) the input field	ReactNode	-
addonBefore	The label text displayed before (on the left side of) the input field	ReactNode	-
allowClear	If allow to remove input content with clear icon	boolean \| { clearIcon: ReactNode }	false
bordered	Whether has border style	boolean	true	4.5.0
classNames	Semantic DOM class	Record<SemanticDOM, string>	-	5.4.0
defaultValue	The initial input content	string	-
disabled	Whether the input is disabled	boolean	false
id	The ID for input	string	-
maxLength	The maximum number of characters in Input	number	-
showCount	Whether to show character count	boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode }	false	4.18.0 info.value: 4.23.0
status	Set validation status	'error' \| 'warning'	-	4.19.0
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-	5.4.0
prefix	The prefix icon for the Input	ReactNode	-
size	The size of the input box. Note: in the context of a form, the `middle` size is used	`large` \| `middle` \| `small`	-
suffix	The suffix icon for the Input	ReactNode	-
type	The type of input, see: MDN( use `Input.TextArea` instead of `type="textarea"`)	string	`text`
value	The input content value	string	-
onChange	Callback when user input	function(e)	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-

When Input is used in a Form.Item context, if the Form.Item has the id props defined then value, defaultValue, and id props of Input are automatically set.

The rest of the props of Input are exactly the same as the original input.

Input.TextArea

Property	Description	Type	Default	Version
allowClear	Customize clear icon	boolean \| { clearIcon?: ReactNode }	false	5.8.0: Support object type
autoSize	Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 }	boolean \| object	false
bordered	Whether has border style	boolean	true	4.5.0
classNames	Semantic DOM class	Record<SemanticDOM, string>	-	5.4.0
defaultValue	The initial input content	string	-
maxLength	The maximum number of characters in TextArea	number	-	4.7.0
showCount	Whether to show character count	boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string }	false	4.7.0 formatter: 4.10.0 info.value: 4.23.0
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-	5.4.0
value	The input content value	string	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-
onResize	The callback function that is triggered when resize	function({ width, height })	-

The rest of the props of Input.TextArea are the same as the original textarea.

Input.Search

Property	Description	Type	Default
enterButton	Whether to show an enter button after input. This property conflicts with the `addonAfter` property	boolean \| ReactNode	false
loading	Search box with loading	boolean	false
onSearch	The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key	function(value, event, { source: "input" \| "clear" })	-

Supports all props of Input.

Input.Password

Property	Description	Type	Default	Version
iconRender	Custom toggle button	(visible) => ReactNode	(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)	4.3.0
visibilityToggle	Whether show toggle button or control password visible	boolean \| VisibilityToggle	true

VisibilityToggle

Property	Description	Type	Default	Version
visible	Whether the password is show or hide	boolean	false	4.24.0
onVisibleChange	Callback executed when visibility of the password is changed	boolean	-	4.24.0

Input Methods

Name	Description	Parameters	Version
blur	Remove focus	-
focus	Get focus	(option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' })	option - 4.10.0

Semantic DOM

Input

Property	Description	Version
input	`input` element	5.4.0
prefix	Wrapper of prefix	5.4.0
suffix	Wrapper of suffix	5.4.0
count	Text count element	5.4.0

Input.TextArea

Property	Description	Version
textarea	`textarea` element	5.4.0
count	Text count element	5.4.0

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
activeBorderColor	Active border color	string	#4096ff
activeShadow	Box-shadow when active	string	0 0 0 2px rgba(5, 145, 255, 0.1)
addonBg	Background color of addon	string	rgba(0, 0, 0, 0.02)
errorActiveShadow	Box-shadow when active in error status	string	0 0 0 2px rgba(255, 38, 5, 0.06)
hoverBorderColor	Hover border color	string	#4096ff
paddingBlock	Vertical padding of input	number	4
paddingBlockLG	Vertical padding of large input	number	7
paddingBlockSM	Vertical padding of small input	number	0
paddingInline	Horizontal padding of input	number	11
paddingInlineLG	Horizontal padding of large input	number	11
paddingInlineSM	Horizontal padding of small input	number	7
warningActiveShadow	Box-shadow when active in warning status	string	0 0 0 2px rgba(255, 215, 5, 0.1)

Global TokenHow to use?

FAQ

Why Input lose focus when change `prefix/suffix/showCount`

When Input dynamic add or remove prefix/suffix/showCount will make React recreate the dom structure and new input will be not focused. You can set an empty <span /> element to keep the dom structure:

const suffix = condition ? <Icon type="smile" /> : <span />;

<Input suffix={suffix} />;

Why TextArea in control can make `value` exceed `maxLength`?

When in control, component should show as what it set to avoid submit value not align with store value in Form.