Pin Input
The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.
Import#
import { PinInput } from '@chakra-ui/react'
Usage#
Allowing Alphanumeric values#
By default, the pin input accepts only number values. To add support for
alphanumeric values, pass the type prop and set its value to either
alphanumeric or number.
Using fields as a one time password (OTP)#
Use the otp prop on PinInput to set autocomplete="one-time-code" for all
children PinInput.Field components.
Masking the pin input's value#
When collecting private or sensitive information using the pin input, you might
need to mask the value entered, similar to <input type="password"/>.
Pass the mask prop to PinInput to achieve this.
Changing the size#
The PinInput component comes in four sizes. The default is md. The possible
sizes are xs, sm, md, and lg.
Setting the initial value#
You can set the defaultValue of the PinInput if you wish:
Changing the placeholder#
To customize the default input placeholder (○), pass the placeholder prop
and set it to your desired placeholder.