Pin Input

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

    SourceTheme source@chakra-ui/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.

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

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>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel