Input
Importimport{ Input }from"antd"; |
Sourcecomponents/input |
DocsEdit this page |
Importimport{ Input }from"antd"; |
Sourcecomponents/input |
DocsEdit this page |
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
Input
is used in aForm.Item
context, if theForm.Item
has theid
props defined thenvalue
,defaultValue
, andid
props ofInput
are 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
mask
prop 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 |
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/showCount
When 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.