Input输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

何时使用

需要用户输入表单域内容时。
提供组合型输入框，带搜索的输入框，还可以进行大小选择。

代码演示

基本使用。

TypeScript
JavaScript
import React from 'react';
import { Input } from 'antd';

const App: React.FC = () => <Input placeholder="Basic usage" />;

export default App;

http://.com

http://

.com

http://.com

cascader

前置/后置标签

用于配置一些固定组合。

TypeScript
JavaScript
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;

https://

搜索框

带有搜索按钮的输入框。

TypeScript
JavaScript
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;

文本域

用于多行输入。

TypeScript
JavaScript
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;

输入时格式化展示

结合 Tooltip 组件，实现一个数值输入框，方便内容超长时的全量展现。

TypeScript
JavaScript
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;
}

密码框

密码框。

TypeScript
JavaScript
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;

0 / 20

0 / 100

带字数提示

展示字数提示。

TypeScript
JavaScript
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;

自定义状态

使用 status 为 Input 添加状态，可选 error 或者 warning。

TypeScript
JavaScript
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;

聚焦

聚焦额外配置属性。

TypeScript
JavaScript
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;

三种大小

我们为 <Input /> 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。

TypeScript
JavaScript
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;

https://

Zhejiang

紧凑模式

使用 Space.Compact 创建紧凑模式，更多请查看 Space.Compact 文档。

TypeScript
JavaScript
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;

搜索框 loading

用于 onSearch 的时候展示 loading。

TypeScript
JavaScript
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 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。

TypeScript
JavaScript
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;

￥RMB

￥RMB

前缀和后缀

在输入框上添加前缀或后缀图标。

TypeScript
JavaScript
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;

带移除图标

带移除图标的输入框，点击图标删除所有内容。

TypeScript
JavaScript
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;

0 / 100

带字数提示的文本域

展示字数提示。

TypeScript
JavaScript
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;

无边框

没有边框。

TypeScript
JavaScript
import React from 'react';
import { Input } from 'antd';

const App: React.FC = () => <Input placeholder="Borderless" bordered={false} />;

export default App;

API

Input

参数	说明	类型	默认值	版本
addonAfter	带标签的 input，设置后置标签	ReactNode	-
addonBefore	带标签的 input，设置前置标签	ReactNode	-
allowClear	可以点击清除图标删除内容	boolean \| { clearIcon: ReactNode }	-
bordered	是否有边框	boolean	true	4.5.0
defaultValue	输入框默认内容	string	-
disabled	是否禁用状态，默认为 false	boolean	false
id	输入框的 id	string	-
maxLength	最大长度	number	-
showCount	是否展示字数	boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode }	false	4.18.0 info.value: 4.23.0
status	设置校验状态	'error' \| 'warning'	-	4.19.0
prefix	带有前缀图标的 input	ReactNode	-
size	控件大小。注：标准表单内的输入框大小限制为 `middle`	`large` \| `middle` \| `small`	-
suffix	带有后缀图标的 input	ReactNode	-
type	声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 `Input.TextArea` 代替 `type="textarea"`)	string	`text`
value	输入框内容	string	-
onChange	输入框内容变化时的回调	function(e)	-
onPressEnter	按下回车的回调	function(e)	-

如果 Input 在 Form.Item 内，并且 Form.Item 设置了 id 和 options 属性，则 value defaultValue 和 id 属性会被自动设置。

Input 的其他属性和 React 自带的 input 一致。

Input.TextArea

参数	说明	类型	默认值	版本
allowClear	可以点击清除图标删除内容	boolean	false
autoSize	自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 }	boolean \| object	false
bordered	是否有边框	boolean	true	4.5.0
defaultValue	输入框默认内容	string	-
maxLength	内容最大长度	number	-	4.7.0
showCount	是否展示字数	boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string }	false	4.7.0 formatter: 4.10.0 info.value: 4.23.0
value	输入框内容	string	-
onPressEnter	按下回车的回调	function(e)	-
onResize	resize 回调	function({ width, height })	-

Input.TextArea 的其他属性和浏览器自带的 textarea 一致。

Input.Search

参数	说明	类型	默认值
enterButton	是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。	boolean \| ReactNode	false
loading	搜索 loading	boolean	false
onSearch	点击搜索图标、清除图标，或按下回车键时的回调	function(value, event)	-

其余属性和 Input 一致。

Input.Password

参数	说明	类型	默认值	版本
iconRender	自定义切换按钮	(visible) => ReactNode	(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)	4.3.0
visibilityToggle	是否显示切换按钮或者控制密码显隐	boolean \| VisibilityToggle	true

VisibilityToggle

Property	Description	Type	Default	Version
visible	用于手动控制密码显隐	boolean	false	4.24
onVisibleChange	显隐密码的回调	boolean	-	4.24

Input Methods

名称	说明	参数	版本
blur	取消焦点	-
focus	获取焦点	(option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' })	option - 4.10.0

Design Token

Global Token

Token 名称	描述	类型	默认值
colorBgContainer	组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。	string	#ffffff
colorBgContainerDisabled	控制容器在禁用状态下的背景色。	string	rgba(0, 0, 0, 0.04)
colorBorder	默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。	string	#d9d9d9
colorError	用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。	string	#ff4d4f
colorErrorBorderHover	错误色的描边色悬浮态	string	#ffa39e
colorErrorOutline	控制输入组件错误状态下的外轮廓线颜色。	string	rgba(255, 38, 5, 0.06)
colorFillAlter	控制元素替代背景色。	string	rgba(0, 0, 0, 0.02)
colorIcon	控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 *	string	rgba(0, 0, 0, 0.45)
colorIconHover	控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。	string	rgba(0, 0, 0, 0.88)
colorPrimary	品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义	string	#1677ff
colorPrimaryActive	主色梯度下的深色激活态。	string	#0958d9
colorPrimaryHover	主色梯度下的悬浮态。	string	#4096ff
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0, 0, 0, 0.88)
colorTextDescription	控制文本描述字体颜色。	string	rgba(0, 0, 0, 0.45)
colorTextDisabled	控制禁用状态下的字体颜色。	string	rgba(0, 0, 0, 0.25)
colorTextPlaceholder	控制占位文本的颜色。	string	rgba(0, 0, 0, 0.25)
colorTextQuaternary	第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。	string	rgba(0, 0, 0, 0.25)
colorTextTertiary	第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。	string	rgba(0, 0, 0, 0.45)
colorWarning	用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。	string	#faad14
colorWarningBorderHover	警戒色的描边色悬浮态	string	#ffd666
colorWarningOutline	控制输入组件警告状态下的外轮廓线颜色。	string	rgba(255, 215, 5, 0.1)
borderRadius	基础组件的圆角大小，例如按钮、输入框、卡片等	number	6
borderRadiusLG	LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。	number	8
borderRadiusSM	SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角	number	4
controlHeight	Ant Design 中按钮和输入框等基础控件的高度	number	32
controlHeightLG	较高的组件高度	number	40
controlHeightSM	较小的组件高度	number	24
controlOutline	控制输入组件的外轮廓线颜色。	string	rgba(5, 145, 255, 0.1)
controlOutlineWidth	控制输入组件的外轮廓线宽度。	number	2
controlPaddingHorizontal	控制元素水平内间距。	number	12
controlPaddingHorizontalSM	控制元素中小尺寸水平内间距。	number	8
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeIcon	控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。	number	12
fontSizeLG	大号字体大小	number	16
lineHeight	文本行高	number	1.5714285714285714
lineHeightLG	大型文本行高	number	1.5
lineType	用于控制组件边框、分割线等的样式，默认是实线	string	solid
lineWidth	用于控制组件边框、分割线等的宽度	number	1
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s
paddingLG	控制元素的大内间距。	number	24
paddingSM	控制元素的小内间距。	number	12
paddingXS	控制元素的特小内间距。	number	8
paddingXXS	控制元素的极小内间距。	number	4

FAQ

为什么我动态改变 `prefix/suffix/showCount` 时，Input 会失去焦点？

当 Input 动态添加或者删除 prefix/suffix/showCount 时，React 会重新创建 DOM 结构而新的 input 是没有焦点的。你可以预设一个空的 <span /> 来保持 DOM 结构不变：

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

<Input suffix={suffix} />;

为何 TextArea 受控时，`value` 可以超过 `maxLength`？

受控时，组件应该按照受控内容展示。以防止在表单组件内使用时显示值和提交值不同的问题。

Input输入框

Input输入框

何时使用

代码演示

API

Input

Input.TextArea

Input.Search

Input.Password

VisibilityToggle

Input Methods

Design Token

Global Token

FAQ

为什么我动态改变 prefix/suffix/showCount 时，Input 会失去焦点？

为何 TextArea 受控时，value 可以超过 maxLength？

何时使用

代码演示

API

Input

Input.TextArea

Input.Search

Input.Password

VisibilityToggle

Input Methods

Design Token

Global Token

FAQ

为什么我动态改变 prefix/suffix/showCount 时，Input 会失去焦点？

为何 TextArea 受控时，value 可以超过 maxLength？

为什么我动态改变 `prefix/suffix/showCount` 时，Input 会失去焦点？

为何 TextArea 受控时，`value` 可以超过 `maxLength`？

为什么我动态改变 `prefix/suffix/showCount` 时，Input 会失去焦点？

为何 TextArea 受控时，`value` 可以超过 `maxLength`？