Ark UI

Import

import {
  PinInput,
  PinInputControl,
  PinInputInput,
  PinInputLabel,
} from '@ark-ui/react'

Usage

The PinInput component consists of the PinInputControl PinInputInput and PinInputLabel components. Combine them as desired to fit your design system.

<PinInput>
  <PinInputLabel>Label</PinInputLabel>
  <PinInputControl>
    <PinInputInput index={0} />
    <PinInputInput index={1} />
    <PinInputInput index={2} />
  </PinInputControl>
</PinInput>

Setting a default value

To set the initial value of the pin input, set the defaultValue prop.

<PinInput defaultValue="123">{/*...*/}</PinInput>

Changing the placeholder

To customize the default pin input placeholder ○ for each input, pass the placeholder prop and set it to your desired value.

<PinInput placeholder="*">{/*...*/}</PinInput>

Blur on complete

By default, the last input maintains focus when filled, and we invoke the onComplete callback. To blur the last input when the user completes the input, set the prop blurOnComplete to true.

<PinInput blurOnComplete>{/*...*/}</PinInput>

Using OTP mode

To trigger smartphone OTP auto-suggestion, it is recommended to set the autocomplete attribute to “one-time-code”. The pin input component provides support for this automatically when you set the otp prop to true.

<PinInput otp>{/*...*/}</PinInput>

Securing the text input

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 true.

<PinInput mask>{/*...*/}</PinInput>

Listening for changes

The pin input component invokes several callback functions when the user enters:

onChange — Callback invoked when the value is changed.
onComplete — Callback invoked when all fields have been completed (by typing or pasting).
onInvalid — Callback invoked when an invalid value is entered into the input. An invalid value is any value that doesn’t match the specified “type”.

Pin Input