* feat: Input.OTP support mask prop * fix: fix * fix: fix * test: add test case * test: add test case * chore: fix * chore: update * chore: remove * chore: rename useOTPSingleValue * fix: fix * fix: fix * chore: rm 3 lib * chore: add 3 lib * fix: fix * fix: fix * test: fix test case * test: fix test case * fix: fix * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com>
8.8 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Data Entry | Input | Through mouse or keyboard input content, it is the most basic form field wrapper. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
- A user input in a form field is needed.
- A search input is required.
Examples
Basic usage
Three sizes of Input
Variants
Filled Debug
Pre / Post tab
Compact Style
Input Group
Search box
Search box with loading
TextArea
Autosizing the height to fit the content
OTP
Format Tooltip Input
prefix and suffix
Password box
With clear icon
With character counting
Custom count logic
Status
Focus
Style Debug
Text Align
TextArea
debug Pre / Post tab
debug token
API
Common props ref:Common props
Input
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) | - |
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.
CountConfig
interface CountConfig {
// Max character count. Different from the native `maxLength`, it will be marked warning but not truncated
max?: number;
// Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1
strategy?: (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 configured
exceedFormatter?: (value: string, config: { max: number }) => string;
}
Input.TextArea
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.
Input.Search
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
.
Input.Password
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 |
Input.OTP
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) | - |
VisibilityToggle
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 |
Input Methods
Name | Description | Parameters | Version |
---|---|---|---|
blur | Remove focus | - | |
focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | option - 4.10.0 |
Semantic DOM
Input
Input.TextArea
Design Token
FAQ
Why Input lose focus when change 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} />;
Why TextArea in control can make value
exceed maxLength
?
When in control, component should show as what it set to avoid submit value not align with store value in Form.