Input

The basic form components have been expanded on the basis of native controls and can be used in combination.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Input content via mouse or keyboard.
Status: Different Input status.
Size: Input defines four sizes (mini, small, default, large), which are 24px, 28px, 32px, and 36px.
Front/Post Label: Specify addBefore/addAfter to add elements before/after the input box.
Prefix/Suffix: Add a prefix(suffix) in the input box by specifying prefix(suffix).
Search Box: Input box with search button for content retrieval.
Search Box with Loading: Through the loading property, you can set the search box to display loading when onSearch.
Input Group: Input content via mouse or keyboard.
Length Limit: Set maxLength to limit the maximum number of words, and use showWordLimit to display word count statistics. Setting maxLength.errorOnly will not limit the number of words entered by the user, but if the maximum number of words is exceeded, an error status will be displayed. It is worth noting that if showWordLimit is configured, then you cannot use suffix.
Textarea: A textarea input example.
Autosize Textarea: Specify autoSize, the text field will automatically adjust the height of the text field according to the input text. If you specify autoSize={{ minRows, maxRows }}, you can also specify the minimum/maximum number of rows.
Password: Used for password input.
Normalize Value: Format the value entered by the user at the specified time, and when the previous and subsequent values are inconsistent, onChange will be triggered
Auto Width: Through the autoWidth attribute, you can set the width of Input to adapt to the text.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Input

Input Accept all native attribute values

Property	Description	Type	DefaultValue	Version
allowClear	Whether allow clear value	boolean	`-`	-
disabled	Whether the input is disabled	boolean	`-`	-
error	Whether the input is error.(Deprecated, removed in the next major version, use status='error' instead)	boolean	`-`	-
readOnly	Whether the input is readOnly	boolean	`-`	-
showWordLimit	With `maxLength`, Show word count.	boolean	`-`	-
defaultValue	The initial input content	string	`-`	-
placeholder	Input box prompt text	string	`-`	-
value	The input content value	string	`-`	-
autoWidth	auto width. minWidth defaults to 0, maxWidth defaults to 100%	\| boolean\| { minWidth?: CSSProperties['minWidth']; maxWidth?: CSSProperties['maxWidth'] }	`-`	2.54.0
normalizeTrigger	Specify the timing of normalize execution	('onBlur' \| 'onPressEnter')[]	`['onBlur']`	2.50.0
size	The size of the input box	'mini' \| 'small' \| 'default' \| 'large'	`default`	-
status	Status	'error' \| 'warning'	`-`	2.45.0
addAfter	The label text displayed after (on the right side of) the input field	ReactNode	`-`	-
addBefore	The label text displayed before (on the left side of) the input field	ReactNode	`-`	-
clearIcon	Configure the icon of the clear button when `allowClear`.	ReactNode	`-`	2.50.0
prefix	The prefix icon or text for the Input	ReactNode	`-`	-
suffix	The suffix icon or text for the Input	ReactNode	`-`	-
afterStyle	The additional css style of the `addAfter` element	object	`-`	-
beforeStyle	The additional css style of the `addBefore` element	object	`-`	-
className	Additional css class	string \| string[]	`-`	-
height	Custom input height	number \| string	`-`	-
maxLength	The max content length；After setting `errorOnly` to `true`, if `maxLength` is exceeded, the `error` status will be displayed, and user input will not be restricted.	number \| { length: number; errorOnly?: boolean }	`-`	`errorOnly` in 2.23.0
style	Additional style	CSSProperties	`-`	-
normalize	Format the value entered by the user at the specified time, and when the previous and subsequent values are inconsistent, onChange will be triggered	(value: string) => string	`-`	2.50.0
onChange	Callback when user input	(value: string, e) => void	`-`	-
onClear	Callback when click clear button	() => void	`-`	-
onPressEnter	Callback when press enter key	(e) => void	`-`	-

Input.TextArea

Property	Description	Type	DefaultValue	Version
allowClear	Whether allow clear the content	boolean	`-`	2.2.0
disabled	Whether the textarea is disabled	boolean	`-`	-
error	Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)	boolean	`-`	-
defaultValue	To set default value	string	`-`	-
placeholder	textarea placeholder	string	`-`	-
value	To set value	string	`-`	-
status	Status	'error' \| 'warning'	`-`	2.45.0
clearIcon	Configure the icon of the clear button when `allowClear`.	ReactNode	`-`	2.50.0
autoSize	Height autoSize feature	boolean \| { minRows?: number; maxRows?: number }	`-`	-
className	Additional css class	string \| string[]	`-`	-
maxLength	The max content length；After setting `errorOnly` to `true`, if `maxLength` is exceeded, the `error` status will be displayed, and user input will not be restricted.	number \| { length: number; errorOnly?: boolean }	`-`	`errorOnly` in 2.23.0
style	Additional style	CSSProperties	`-`	-
wrapperStyle	With `showWordLimit`, a `div` will be outside the `textarea` tag, and `wrapperStyle` is used to configure the style of it.	CSSProperties	`-`	-
wordLimitPosition	The position of the word count	`'inside' \| 'outside'`	`inside`	2.66.14
onChange	Callback when user input	(value: string, e) => void	`-`	-
onClear	Callback when click clear button	() => void	`-`	2.2.0
onPressEnter	Callback when press enter key	(e) => void	`-`	-

Input.Group

Property	Description	Type	DefaultValue
compact	Whether to use compact mode	boolean	`-`
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`

Input.Search

Contains all the parameters of the Input component

Property	Description	Type	DefaultValue	Version
loading	Show loading status when searching	boolean	`-`	2.6.0
searchButton	Search button	boolean \| ReactNode	`-`	`ReactNode` in 2.6.0
onSearch	Callback when click search button	(value: string) => void	`-`	-

Input.Password

Contains all the parameters of the Input component

Property	Description	Type	DefaultValue
defaultVisibility	To set default visibility	boolean	`-`
visibility	-	boolean	`-`
visibilityToggle	Whether to display the button to switch the visible state of the password	boolean	`-`
onVisibilityChange	Callback when visibility changes	(visibility: boolean) => void	`-`

Method

Property	Description	Type	Default
focus	Get focus	`Function`	`-`
blur	Remove focus	`Function`	`-`

Demo

<Input ref={(ref) => (this.input = ref)} />;

this.input.focus();
this.input.blur();