Importimport { Input } from "antd"; |
Docs |
contributors
Importimport { Input } from "antd"; |
Docs |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
The label text displayed after (on the right side of) the input field, please use Space.Compat instead | ReactNode | - | ||
The label text displayed before (on the left side of) the input field, please use Space.Compat instead | ReactNode | - | ||
| allowClear | If allow to remove input content with clear icon | boolean | { clearIcon: ReactNode } | false | |
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> | - | |
| 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> | - | |
| 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 | underlined | outlined | 5.13.0 | underlined: 5.24.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 | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - |
The rest of the props of Input.TextArea are the same as the original textarea.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| 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> | - |
Supports all props of Input.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | |
| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | |
| 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 |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| 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> | - | |
| 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 | 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 |
|---|---|---|---|---|
| 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) |
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.