Input · PinCode
PinCode
For easy and intuitive verification code entry

Code demonstration

How to import

PinCode supported from 2.62.0

Basic usage

Controlled

Use value to pass in the verification code string and use it with onChange for controlled use

Limit verification code format

Set the number of digits

Set the number of digits through count, the default is 6 digits, the demo below is set to 4 digits

Set character range

Use format to control the character range that can be entered
  • Pass "number" to only allow numbers
  • Pass "mixed" to allow numbers and letters
  • Pass in a regular expression to only allow characters that can be judged by the regular expression
  • Pass in a function, and the verification code will be passed in as parameters in units of characters for verification when entering. When the function returns true, the character is allowed to be entered into the PinCode

Manual focus and blur

Use the focus and blur methods on Ref, and the input parameter is the serial number of the corresponding Input

API Reference

PropertyDescriptionTypeDefault valueVersion
autoFocusWhether to automatically focus on the first elementbooleantrue
classNameClass namestring
countNumber of digits of verification codenumber6
defaultValueDefault value of input box contentstring
disabledDisablebooleanfalse
formatLimitation of single character format of verification code'number'| 'mixed‘ | RegExp | (char:string)=>boolean'number'
sizeInput box size, large, default, smallstring'default'
styleStyleobject
valueInput box contentstring
onChangeInput callback(value:string)=>void
onCompleteCallback after all digits of verification code are entered(value: string) => void

Methods

Methods bound to component instances can be called through ref to implement certain special interactions
AttributesDescription
focusFocus, the input parameter is the verification code number
blurRemove focus, the input parameter is the verification code number