The PinInput component is composed of multiple PinInputField components, each representing a single digit of the PIN code. It provides the following features:
The PinInput component consists of the following subcomponents:
PinInputField: Represents an individual input field within the PinInput component. It renders as an
<input>element by default and provides various props for customization.
PinInputAddon: Optional component that allows developers to add additional content before or after the input fields, such as icons or labels.
These components can be imported as follows:
The PinInputField component is responsible for rendering an individual input field within the PinInput component. It inherits all the props available to the Input component in Chakra UI and provides additio nal functionality specific to PIN code input.
The PinInputField component accepts the following props in addition to the props inherited from the Input component:
size: Determines the size of the input field, supporting values such as "sm", "md", and "lg". This prop can be used to adjust the input field's visual appearance based on the application's design requirements.
isDisabled: Disables the input field, preventing user interaction and indicating that the PIN input is not available for editing.
isInvalid: Sets the input field to an invalid state, indicating an error or validation issue with the entered PIN code.
One-Time Password (OTP) Fields
<input type="password" />field.
By passing the mask prop to the PinInput component, the input values are hidden, providing an extra layer of security. Users' inputs are visually obscured to protect sensitive information from unauthorized viewing.
Setting a Default Value
In this example, we pre-fill the PinInput with the default value '1234'. This feature is useful when users need to enter a PIN code repeatedly or when a default PIN code is required for specific scenarios. By providing a default value, you can streamline the user experience and reduce friction.
To specify a partial value, i.e. fewer than the total number of input fields, you can pass a string with the desired value to the defaultValue prop. For example, if you want to pre-fill the first two input fields only, you can pass '12' to the defaultValue prop.
Customizing the Placeholder
For example, if you are feeling at peace with the universe, you can use "Om" as the placeholder, as shown below.
In this examples, the manageFocus prop is set to false for the PinInput components. This means that the focus will remain on the current input field even after it is filled, and the focus won't be transferred to the next input automatically.
Copying, Pasting, and Autofill
Here, the PinInput components are used without any additional props. You can try copying and pasting the value "1234" into any of the input fields, and you'll notice that PinInput will attempt to validate the input and fill the other fields accordingly.
Did you know?
Creative Idea No. 1
Password Strength: 0%
Creative Idea No. 2
Creative Idea No. 3
Time remaining: 23s