Pin Input

Import#

import { PinInput, PinInputField } from '@chakra-ui/react'

• 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>

Props#

PinInputField#

PinInputField composes Input so you can pass all Input props.