Input
Input
Importimport { Input } from 'antd'; |
Importimport { Input } from 'antd'; |
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| The label text displayed after (on the right side of) the input field, please use Space.Compact instead | ReactNode | - | × | ||
| The label text displayed before (on the left side of) the input field, please use Space.Compact instead | ReactNode | - | × | ||
| allowClear | Whether to show a clear icon to remove input content | boolean | { clearIcon: ReactNode, disabled?: boolean } | - | disabled: 6.4.0 | 5.15.0 |
Whether has border style, please use variant instead | boolean | true | 4.5.0 | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 5.4.0 | 5.7.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 | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 5.4.0 | 5.7.0 |
| size | The size of the input box. Note: in the context of a form, the medium size is used | large | medium | 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 | underlined | outlined | 5.13.0 | underlined: 5.24.0 | 5.19.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 | Global Config |
|---|---|---|---|---|---|
| autoSize | Height auto size feature, can be set to true | false or an object { minRows: 2, maxRows: 6 } | boolean | object | false | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 5.4.0 | 5.15.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 5.4.0 | 5.15.0 |
The rest of the props of Input.TextArea are the same as the original textarea.
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | 6.0.0 |
| enterButton | false displays the default button color, true uses the primary color, or you can provide a custom button. Conflicts with addonAfter. | 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" }) | - | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | 6.0.0 |
| searchIcon | Customize the search icon | ReactNode | - | 6.4.0 | 6.4.0 |
Supports all props of Input.
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | 5.4.0 | 6.4.0 |
| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 | 6.4.0 |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 | 6.4.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 | Global Config |
|---|---|---|---|---|---|
| autoComplete | The autocomplete attribute for input elements, e.g. one-time-code for OTP autofill | string | - | 6.3.0 | × |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | 6.0.0 |
| defaultValue | Default value | string | - | × | |
| disabled | Whether the input is disabled | boolean | false | × | |
| formatter | Format display, blank fields will be filled with | (value: string) => string | - | × | |
| separator | render the separator after the input box of the specified index | ReactNode |((i: number) => ReactNode) | - | 5.24.0 | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | 6.0.0 |
| 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 | medium | large | medium | × | |
| variant | Variants of Input | outlined | borderless | filled | underlined | outlined | underlined: 5.24.0 | × |
| 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 | × |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| tabIndex | Set the tabIndex of the toggle button | number | 0 | 6.5.0 |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| activeBg | Background color when the input box is activated | string | #ffffff |
| activeBorderColor | Active border color | string | #1677ff |
| activeShadow | Box-shadow when active | string | 0 0 0 2px rgba(5,145,255,0.1) |
| addonBg | Background color of addon | string | rgba(0,0,0,0.02) |
| errorActiveShadow | Box-shadow when active in error status | string | 0 0 0 2px rgba(255,38,5,0.06) |
| hoverBg | Background color when the input box hovers | string | #ffffff |
| hoverBorderColor | Hover border color | string | #4096ff |
| inputFontSize | Font size | number | 14 |
| inputFontSizeLG | Font size of large | number | 16 |
| inputFontSizeSM | Font size of small | number | 14 |
| paddingBlock | Vertical padding of input | number | 4 |
| paddingBlockLG | Vertical padding of large input | number | 7 |
| paddingBlockSM | Vertical padding of small input | number | 0 |
| paddingInline | Horizontal padding of input | number | 11 |
| paddingInlineLG | Horizontal padding of large input | number | 11 |
| paddingInlineSM | Horizontal padding of small input | number | 7 |
| warningActiveShadow | Box-shadow when active in warning status | string | 0 0 0 2px rgba(255,215,5,0.1) |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainerDisabled | Control the background color of container in disabled state. | string | rgba(0,0,0,0.04) |
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorBorderDisabled | Control the border color of the element in the disabled state. | string | #d9d9d9 |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorErrorBg | The background color of the error state. | string | #fff2f0 |
| colorErrorText | The default state of the text in the error color. | string | #ff4d4f |
| colorFillTertiary | The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color. | string | rgba(0,0,0,0.04) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorWarning | Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens. | string | #faad14 |
| colorWarningBg | The background color of the warning state. | string | #fffbe6 |
| colorWarningText | The default state of the text in the warning color. | string | #faad14 |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| controlHeightLG | LG component height | number | 40 |
| controlHeightSM | SM component height | number | 24 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | 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 | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |
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.