# VerificationCode

- Page: https://jiguang132.com/resources/arco-design/docs/verification-code
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Verification code input component. `2.55.0` supported

## Install

```bash
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 = true` to turn on password mode
- **Custom separator**: Specify `separator` to 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](input#input)['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 |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt