Pin Input

The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.

Import

import { PinInput, PinInputField } from '@hover/blueprint'

PinInput: The component that provides context to all the pin-input fields.
PinInputField: The text field that user types in - must be a direct child of PinInput.

Usage

The most common use case of the pin input is for entering OTP or security codes.

Each input collects one character at a time. When a value is entered, focus is moved automatically to the next input, until all fields are filled.

<HStack>
  <PinInput>
    <PinInputField />
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

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.

<HStack>
  <PinInput type='alphanumeric'>
    <PinInputField />
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Using fields as a one time password (OTP)

Use the otp prop on PinInput to set autocomplete="one-time-code" for all children PinInputField components.

<HStack>
  <PinInput otp>
    <PinInputField />
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

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.

<HStack>
  <PinInput type='alphanumeric' mask>
    <PinInputField />
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Changing the size of the PinInput

The PinInput component comes in four sizes. The default is md.

xs (24px)
sm (32px)
md (40px)
lg (48px)

<Stack>
  <HStack>
    <PinInput size='xs'>
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  </HStack>
  <HStack>
    <PinInput size='sm'>
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  </HStack>
  <HStack>
    <PinInput size='md'>
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  </HStack>
  <HStack>
    <PinInput size='lg'>
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  </HStack>
</Stack>

Adding a defaultValue

You can set the defaultValue of the PinInput if you wish:

<HStack>
  <PinInput defaultValue='234'>
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Or even a partial defaultValue:

<HStack>
  <PinInput defaultValue='23'>
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Changing the placeholder

To customize the default input placeholder (○), pass the placeholder prop and set it to your desired placeholder.

<HStack>
  <PinInput placeholder='🥳'>
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Disable focus management

By default, PinInput moves focus automatically to the next input once a field is filled. It also transfers focus to a previous input when Delete is pressed with focus on an empty input.

To disable this behavior, set manageFocus to false

<HStack>
  <PinInput manageFocus={false}>
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

AutoFill and Copy + Paste

Try copying & pasting 1234 into any of the inputs in the example above.

By default, you can only change one input at a time, but if one of the input field receives a longer string by pasting into it, PinInput attempts to validate the string and fill the other inputs.

<HStack>
  <PinInput>
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Blueprint

Settings