Input
Input
Through mouse or keyboard input content, it is the most basic form field wrapper.
가져오기import{ Input }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
가져오기import{ Input }from"antd"; |
Common props ref：Common props
| 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 | |
| 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
Inputis used in aForm.Itemcontext, if theForm.Itemhas theidprops defined thenvalue,defaultValue, andidprops ofInputare automatically set.
The rest of the props of Input are exactly the same as the original input.
interface CountConfig {// Max character count. Different from the native `maxLength`, it will be marked warning but not truncatedmax?: number;// Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1strategy?: (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 configuredexceedFormatter?: (value: string, config: { max: number }) => string;}
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.
| 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.
| 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 |
Added in 5.16.0.
Notes for developers
When the
maskprop 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 | function(value: string) | - |
| 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 |
| Name | Description | Parameters | Version |
|---|---|---|---|
| blur | Remove focus | - | |
| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | option - 4.10.0 |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| activeBg | 输入框激活状态时背景颜色 | string | #ffffff |
| activeBorderColor | 激活态边框色 | string | #1677ff |
| activeShadow | 激活态阴影 | string | 0 0 0 2px rgba(5, 145, 255, 0.1) |
| addonBg | 前/后置标签背景色 | string | rgba(0, 0, 0, 0.02) |
| errorActiveShadow | 错误状态时激活态阴影 | string | 0 0 0 2px rgba(255, 38, 5, 0.06) |
| hoverBg | 输入框hover状态时背景颜色 | string | #ffffff |
| hoverBorderColor | 悬浮态边框色 | string | #4096ff |
| inputFontSize | 字体大小 | number | 14 |
| inputFontSizeLG | 大号字体大小 | number | 16 |
| inputFontSizeSM | 小号字体大小 | number | 14 |
| paddingBlock | 输入框纵向内边距 | number | 4 |
| paddingBlockLG | 大号输入框纵向内边距 | number | 7 |
| paddingBlockSM | 小号输入框纵向内边距 | number | 0 |
| paddingInline | 输入框横向内边距 | number | 11 |
| paddingInlineLG | 大号输入框横向内边距 | number | 11 |
| paddingInlineSM | 小号输入框横向内边距 | number | 7 |
| warningActiveShadow | 警告状态时激活态阴影 | string | 0 0 0 2px rgba(255, 215, 5, 0.1) |
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.
