Chakra-UI

I♥️Components

Pin Input

|

Chakra Docs

|

⦾ The PinInput component in Chakra UI is a specialized input component designed specifically for entering PIN codes or similar verification codes. It provides a convenient and user-friendly interface for inputting numerical codes. ThePinInputField component is a subcomponent of PinInput that represents an individual input field within the PinInput component.

The PinInput component is composed of multiple PinInputField components, each representing a single digit of the PIN code. It provides the following features:

  • Responsive Design: The PinInput component automatically adjusts its layout based on the available space, making it suitable for various screen sizes.
  • Keyboard Navigation: Users can navigate through the input fields using the arrow keys or the Tab key, enhancing the accessibility and usability of the component.
  • Custom Styling: The PinInput component allows for easy customization of its appearance, enabling developers to match it with the overall design of their application.

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.

Examples

Basic Usage

⦾ This example demonstrates a basic usage of the PinInput component with six input fields. The PinInput component is configured to accept a 6-digit PIN code. Each PinInputField represents a single digit of the PIN code.

Code

Alphanumeric PinInput

⦾ This example shows the usage of the PinInput component with four input fields, allowing alphanumeric values. By setting the type prop to 'alphanumeric', the PinInput component accepts both numbers and letters as input.

Code

One-Time Password (OTP) Fields

⦾ In this example, we utilize the otp prop on the PinInput component to set the autocomplete attribute to "one-time-code" for all child PinInputField components. This feature enhances the user experience when entering a one-time password.

Code

Masked PinInput

⦾ In scenarios where privacy or sensitive information is collected using the PinInput, developers can utilize the mask prop to mask the entered value, similar to an <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.

Code

Customizing Size

⦾ The PinInput component provides four different sizes to accommodate various design needs. The default size is 'md', but you can customize it by setting the size prop to one of the available options: 'xs' (24px), 'sm' (32px), 'md' (40px), or 'lg' (48px).
size="xs"
size="sm"
size="md"
size="lg"

Code

Setting a Default Value

⦾ The PinInput component allows you to set a default value by using the defaultValue prop. You can specify the initial PIN code that should be pre-filled in the input fields.

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.

Code

Customizing the Placeholder

⦾ The PinInput component comes with a default placeholder character ('○') to represent empty input fields. However, you can customize the placeholder by using the placeholder prop and setting it to your desired value.

For example, if you are feeling at peace with the universe, you can use "Om" as the placeholder, as shown below.

Code

Disable Focus

⦾ By default, the PinInput component moves focus automatically to the next input once a field is filled. It also transfers focus to a previous input when the Delete key is pressed with the focus on an empty input. To disable this behavior and prevent automatic focus management, you can set the manageFocus prop to false.

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.

Code

Copying, Pasting, and Autofill

⦾ By default, when using the PinInput component, you can only change one input field at a time. However, if one of the input fields receives a longer string by pasting into it, PinInput attempts to validate the string and fills the other input fields accordingly.

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.

Code

Did you know?

Creative Idea No. 1

Password Strength Indicator: By combining the PinInput component with custom password strength calculation logic, the example below extends the functionality of the significantly. The password strength algorithm employed in this component is very simple and merely evaluates the password based on the presence of numbers, uppercase letters, lowercase letters, and the mixing of these characters. The password strength is then displayed to the user in the form of a progress bar as well as verbal feedback.

Password Strength: 0%

Code

Creative Idea No. 2

Dynamic Quiz Answer Field: Consider a situation where you're building a fun trivia app that includes questions with numeric answers. In such a scenario, using a PinInput component can add to the user experience by creating a more engaging interaction. As the user fills in the answer digit by digit, suspense builds until they've filled out all the numbers and the answer is automatically validated. (Hint: the answer is 2023.)

In what year was this site made?

Code

Creative Idea No. 3

Timed OTP (One-Time-Password): In this example, we have added a timer to the one-time-password concept. The timer is set to 23 seconds. So if a user fails to enter a value before the countdown finishes, they will be alerted that the timer has run out.

Time remaining: 23s

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.