ant-design/components/input/index.en-US.md

category	group	title	description	cover	coverDark	demo
Components	Data Entry	Input	Through mouse or keyboard input content, it is the most basic form field wrapper.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original	cols 2

When To Use

• A user input in a form field is needed.
• A search input is required.

Examples

Basic usage Three sizes of Input Variants Filled Debug Pre / Post tab Compact Style Input Group Search box Search box with loading TextArea Autosizing the height to fit the content OTP Format Tooltip Input prefix and suffix Password box With clear icon With character counting Custom count logic Status Focus Style Debug Text Align TextArea debug Pre / Post tab debug token

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
count	Character count config	CountConfig	-	5.10.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	-
prefix	The prefix icon for the Input	ReactNode	-
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
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	-
variant	Variants of Input	outlined | borderless | filled	outlined	5.13.0
onChange	Callback when user input	function(e)	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-
onClear	Callback when click the clear button	() => void	-	5.20.0

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.

CountConfig

interface CountConfig {
  // Max character count. Different from the native `maxLength`, it will be marked warning but not truncated
  max?: number;
  // Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1
  strategy?: (value: string) => number;
  // Same as `showCount`
  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
  // Custom clipping logic when the number of characters exceeds `count.max`, no clipping when not configured
  exceedFormatter?: (value: string, config: { max: number }) => string;
}

Input.TextArea

Same as Input, and more:

Property	Description	Type	Default	Version
autoSize	Height auto size feature, can be set to true | false or an object { minRows: 2, maxRows: 6 }	boolean | object	false
classNames	Semantic DOM class	Record<SemanticDOM, string>	-	5.4.0
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-	5.4.0

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

Input.OTP

Added in 5.16.0.

Notes for developers

When the mask prop is string, we recommend receiving a single character or a single emoji. If multiple characters or multiple emoji are passed, a warning will be thrown.

Property	Description	Type	Default	Version
defaultValue	Default value	string	-
disabled	Whether the input is disabled	boolean	false
formatter	Format display, blank fields will be filled with	(value: string) => string	-
mask	Custom display, the original value will not be modified	boolean | string	false	5.17.0
length	The number of input elements	number	6
status	Set validation status	'error' | 'warning'	-
size	The size of the input box	small | middle | large	middle
variant	Variants of Input	outlined | borderless | filled	outlined
value	The input content value	string	-
onChange	Trigger when all the fields are filled	(value: string) => void	-
onInput	Trigger when the input value changes	(value: string[]) => void	-	5.22.0

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	(visible) => void	-	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

Input.TextArea

Design Token

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.