Input
Input
Through mouse or keyboard input content, it is the most basic form field wrapper.
Importimport { Input } from "antd"; |
Sourcecomponents/input |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport { Input } from "antd"; |
Sourcecomponents/input |
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 | |
Whether has border style, please use variant instead | boolean | true | 4.5.0 | |
| 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 | 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 | 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 | 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" }) | - |
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 | - | |
| separator | render the separator after the input box of the specified index | ReactNode |((i: number) => ReactNode) | - | 5.24.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 | 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.
Basic usage example.
Variants of Input, there are four variants: outlined filled borderless and underlined.
Use Space.Compact create compact style, See the Space.Compact documentation for more.
Search loading when onSearch.
autoSize prop for a textarea type of Input makes the height to automatically adjust based on the content. An option object can be provided to autoSize to specify the minimum and maximum number of lines the textarea will automatically adjust.
You can use the Input in conjunction with Tooltip component to create a Numeric Input, which can provide a good experience for extra-long content display.
Input type of password.
Show character counting.
Add status to Input with status, which could be error or warning.
There are three sizes of an Input box: large (40px), default (32px) and small (24px).
Using pre & post tabs example.
Example of creating a search box by grouping a standard input with a search button.
For multi-line input.
One time password input.
Add a prefix or suffix icons inside input.
Input box with the remove icon, click the icon to delete everything.
It is necessary to customize the counting ability in some scenarios (such as emoji length is counted as 1), which can be achieved through the count attribute. Use count.max attribute exceeds the limit of the native maxLength.
Focus with additional option.
