A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
Basic usage example.
import React from 'react';
import { Input } from 'antd';
const App: React.FC = () => <Input placeholder="Basic usage" />;
export default App;
Using pre & post tabs example.
import React from 'react';
import { SettingOutlined } from '@ant-design/icons';
import { Cascader, Input, Select, Space } from 'antd';
const { Option } = Select;
const selectBefore = (
<Select defaultValue="http://">
<Option value="http://">http://</Option>
<Option value="https://">https://</Option>
</Select>
);
const selectAfter = (
<Select defaultValue=".com">
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
);
const App: React.FC = () => (
<Space direction="vertical">
<Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
<Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
<Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
<Input
addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
defaultValue="mysite"
/>
</Space>
);
export default App;
Example of creating a search box by grouping a standard input with a search button.
import React from 'react';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space } from 'antd';
const { Search } = Input;
const suffix = (
<AudioOutlined
style={{
fontSize: 16,
color: '#1890ff',
}}
/>
);
const onSearch = (value: string) => console.log(value);
const App: React.FC = () => (
<Space direction="vertical">
<Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
<Search placeholder="input search text" allowClear onSearch={onSearch} style={{ width: 200 }} />
<Search
addonBefore="https://"
placeholder="input search text"
allowClear
onSearch={onSearch}
style={{ width: 304 }}
/>
<Search placeholder="input search text" onSearch={onSearch} enterButton />
<Search
placeholder="input search text"
allowClear
enterButton="Search"
size="large"
onSearch={onSearch}
/>
<Search
placeholder="input search text"
enterButton="Search"
size="large"
suffix={suffix}
onSearch={onSearch}
/>
</Space>
);
export default App;
For multi-line input.
import React from 'react';
import { Input } from 'antd';
const { TextArea } = Input;
const App: React.FC = () => (
<>
<TextArea rows={4} />
<br />
<br />
<TextArea rows={4} placeholder="maxLength is 6" maxLength={6} />
</>
);
export default App;
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.
import React, { useState } from 'react';
import { Input, Tooltip } from 'antd';
interface NumericInputProps {
style: React.CSSProperties;
value: string;
onChange: (value: string) => void;
}
const formatNumber = (value: number) => new Intl.NumberFormat().format(value);
const NumericInput = (props: NumericInputProps) => {
const { value, onChange } = props;
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { value: inputValue } = e.target;
const reg = /^-?\d*(\.\d*)?$/;
if (reg.test(inputValue) || inputValue === '' || inputValue === '-') {
onChange(inputValue);
}
};
// '.' at the end or only '-' in the input box.
const handleBlur = () => {
let valueTemp = value;
if (value.charAt(value.length - 1) === '.' || value === '-') {
valueTemp = value.slice(0, -1);
}
onChange(valueTemp.replace(/0*(\d+)/, '$1'));
};
const title = value ? (
<span className="numeric-input-title">{value !== '-' ? formatNumber(Number(value)) : '-'}</span>
) : (
'Input a number'
);
return (
<Tooltip trigger={['focus']} title={title} placement="topLeft" overlayClassName="numeric-input">
<Input
{...props}
onChange={handleChange}
onBlur={handleBlur}
placeholder="Input a number"
maxLength={16}
/>
</Tooltip>
);
};
const App: React.FC = () => {
const [value, setValue] = useState('');
return <NumericInput style={{ width: 120 }} value={value} onChange={setValue} />;
};
export default App;
/* to prevent the arrow overflow the popup container,
or the height is not enough when content is empty */
.numeric-input .ant-tooltip-inner {
min-width: 32px;
min-height: 37px;
}
.numeric-input .numeric-input-title {
font-size: 14px;
}Input type of password.
import React from 'react';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { Button, Input, Space } from 'antd';
const App: React.FC = () => {
const [passwordVisible, setPasswordVisible] = React.useState(false);
return (
<Space direction="vertical">
<Input.Password placeholder="input password" />
<Input.Password
placeholder="input password"
iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
/>
<Space direction="horizontal">
<Input.Password
placeholder="input password"
visibilityToggle={{ visible: passwordVisible, onVisibleChange: setPasswordVisible }}
/>
<Button style={{ width: 80 }} onClick={() => setPasswordVisible((prevState) => !prevState)}>
{passwordVisible ? 'Hide' : 'Show'}
</Button>
</Space>
</Space>
);
};
export default App;
Show character counting.
import React from 'react';
import { Input } from 'antd';
const { TextArea } = Input;
const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
console.log('Change:', e.target.value);
};
const App: React.FC = () => (
<>
<Input showCount maxLength={20} onChange={onChange} />
<br />
<br />
<TextArea showCount maxLength={100} onChange={onChange} />
</>
);
export default App;
Add status to Input with status, which could be error or warning.
import React from 'react';
import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
import { Input, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<Input status="error" placeholder="Error" />
<Input status="warning" placeholder="Warning" />
<Input status="error" prefix={<ClockCircleOutlined />} placeholder="Error with prefix" />
<Input status="warning" prefix={<ClockCircleOutlined />} placeholder="Warning with prefix" />
</Space>
);
export default App;
Focus with additional option.
import React, { useRef, useState } from 'react';
import type { InputRef } from 'antd';
import { Button, Input, Space, Switch } from 'antd';
const App: React.FC = () => {
const inputRef = useRef<InputRef>(null);
const [input, setInput] = useState(true);
const sharedProps = {
style: { width: '100%' },
defaultValue: 'Ant Design love you!',
ref: inputRef,
};
return (
<Space direction="vertical" style={{ width: '100%' }}>
<Space wrap>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'start',
});
}}
>
Focus at first
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'end',
});
}}
>
Focus at last
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'all',
});
}}
>
Focus to select all
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
preventScroll: true,
});
}}
>
Focus prevent scroll
</Button>
<Switch
checked={input}
checkedChildren="Input"
unCheckedChildren="TextArea"
onChange={() => {
setInput(!input);
}}
/>
</Space>
<br />
{input ? <Input {...sharedProps} /> : <Input.TextArea {...sharedProps} />}
</Space>
);
};
export default App;
There are three sizes of an Input box: large (40px), default (32px) and small (24px).
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Input } from 'antd';
const App: React.FC = () => (
<>
<Input size="large" placeholder="large size" prefix={<UserOutlined />} />
<br />
<br />
<Input placeholder="default size" prefix={<UserOutlined />} />
<br />
<br />
<Input size="small" placeholder="small size" prefix={<UserOutlined />} />
</>
);
export default App;
Use Space.Compact create compact style, See the Space.Compact documentation for more.
import { Button, Input, Select, Space } from 'antd';
import React from 'react';
const { Search } = Input;
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
},
{
value: 'jiangsu',
label: 'Jiangsu',
},
];
const App: React.FC = () => (
<Space direction="vertical" size="middle">
<Space.Compact>
<Input defaultValue="26888888" />
</Space.Compact>
<Space.Compact>
<Input style={{ width: '20%' }} defaultValue="0571" />
<Input style={{ width: '80%' }} defaultValue="26888888" />
</Space.Compact>
<Space.Compact>
<Search addonBefore="https://" placeholder="input search text" allowClear />
</Space.Compact>
<Space.Compact style={{ width: '100%' }}>
<Input defaultValue="Combine input and button" />
<Button type="primary">Submit</Button>
</Space.Compact>
<Space.Compact>
<Select defaultValue="Zhejiang" options={options} />
<Input defaultValue="Xihu District, Hangzhou" />
</Space.Compact>
</Space>
);
export default App;
Search loading when onSearch.
import React from 'react';
import { Input } from 'antd';
const { Search } = Input;
const App: React.FC = () => (
<>
<Search placeholder="input search loading default" loading />
<br />
<br />
<Search placeholder="input search loading with enterButton" loading enterButton />
<br />
<br />
<Search placeholder="input search text" enterButton="Search" size="large" loading />
</>
);
export default App;
autoSize prop for a textarea type of Input makes the height to automatically adjust based on the content. An option object can be provided to autoSize to specify the minimum and maximum number of lines the textarea will automatically adjust.
import React, { useState } from 'react';
import { Input } from 'antd';
const { TextArea } = Input;
const App: React.FC = () => {
const [value, setValue] = useState('');
return (
<>
<TextArea placeholder="Autosize height based on content lines" autoSize />
<div style={{ margin: '24px 0' }} />
<TextArea
placeholder="Autosize height with minimum and maximum number of lines"
autoSize={{ minRows: 2, maxRows: 6 }}
/>
<div style={{ margin: '24px 0' }} />
<TextArea
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Controlled autosize"
autoSize={{ minRows: 3, maxRows: 5 }}
/>
</>
);
};
export default App;
Add a prefix or suffix icons inside input.
import React from 'react';
import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
import { Input, Tooltip } from 'antd';
const App: React.FC = () => (
<>
<Input
placeholder="Enter your username"
prefix={<UserOutlined className="site-form-item-icon" />}
suffix={
<Tooltip title="Extra information">
<InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
</Tooltip>
}
/>
<br />
<br />
<Input prefix="￥" suffix="RMB" />
<br />
<br />
<Input prefix="￥" suffix="RMB" disabled />
</>
);
export default App;
Input box with the remove icon, click the icon to delete everything.
import React from 'react';
import { Input } from 'antd';
const { TextArea } = Input;
const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
console.log(e);
};
const App: React.FC = () => (
<>
<Input placeholder="input with clear icon" allowClear onChange={onChange} />
<br />
<br />
<TextArea placeholder="textarea with clear icon" allowClear onChange={onChange} />
</>
);
export default App;
Show character counting.
import React from 'react';
import { Input } from 'antd';
const { TextArea } = Input;
const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
console.log('Change:', e.target.value);
};
const App: React.FC = () => (
<>
<TextArea
showCount
maxLength={100}
style={{ height: 120, marginBottom: 24 }}
onChange={onChange}
placeholder="can resize"
/>
<TextArea
showCount
maxLength={100}
style={{ height: 120, resize: 'none' }}
onChange={onChange}
placeholder="disable resize"
/>
</>
);
export default App;
No border.
import React from 'react';
import { Input } from 'antd';
const App: React.FC = () => <Input placeholder="Borderless" bordered={false} />;
export default App;
| 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 |
| defaultValue | The initial input content | string | - | |
| disabled | Whether the input is disabled | boolean | false | |
| id | The ID for input | string | - | |
| maxLength | The max length | number | - | |
| showCount | Whether show text 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 |
| 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
Inputis used in aForm.Itemcontext, if theForm.Itemhas theidandoptionsprops defined thenvalue,defaultValue, andidprops ofInputare automatically set.
The rest of the props of Input are exactly the same as the original input.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| allowClear | If allow to remove input content with clear icon | boolean | false | |
| 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 |
| defaultValue | The initial input content | string | - | |
| maxLength | The max length | number | - | 4.7.0 |
| showCount | Whether show text count | boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.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.
| 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) | - |
Supports all props of Input.
| 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 |
| 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 |
| Name | Description | Parameters | Version |
|---|---|---|---|
| blur | Remove focus | - | |
| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | option - 4.10.0 |
prefix/suffix/showCountWhen 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} />;
value exceed maxLength?When in control, component should show as what it set to avoid submit value not align with store value in Form.