VerificationCode
Verification code input component. 2.55.0 supported
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: Basic uasge.
- Status: Disabled Status、 Error status
- Masked: Use
masked = trueto turn on password mode - Custom separator: Specify
separatorto customize the rendering separator - With Form: Use with forms to implement verification
- Validation and formatted input: Validate input via validate. Additionally, non-boolean types can be returned to format user-entered strings into a specific format.
- useVerificationCode: 通过 useVerificationCode 自定义验证码组件
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
VerificationCode
2.55.0
| Property | Description | Type | DefaultValue |
|---|---|---|---|
| disabled | disabled | boolean | - |
| masked | Password mode | boolean | - |
| readOnly | readOnly | boolean | - |
| length | The length of the verification code, rendering the corresponding number of input boxes according to the length | number | 6 |
| defaultValue | The initial input content | string | - |
| value | The input content value | string | - |
| size | Size | InputProps['size'] | - |
| status | Status | 'error' | - |
| className | Additional css class | string | string[] | - |
| style | Additional style | CSSProperties | - |
| onChange | Callback triggered when input value changes | (value: string) => void | - |
| onFinish | A callback triggered after the input boxes are filled in | (value: string) => void | - |
| separator | Separator. Customizable rendering separators after input boxes with different indexes | (data: { index: number; character: string }) => ReactNode | - |
| validate | Verification function, triggered when the user input value changes | (data: { inputValue: string; value: string; index: number }) => boolean | string | - |