Pin Input

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

Import#

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

Usage#

<HStack>
  <PinInput.Root>
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
</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.Root type='alphanumeric'>
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
</HStack>

Using fields as a one time password (OTP)#

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

<HStack>
  <PinInput.Root otp>
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
</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.Root type='alphanumeric' mask>
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
</HStack>

Changing the size#

The PinInput component comes in four sizes. The default is md. The possible sizes are xs, sm, md, and lg.

<Stack>
  <HStack>
    <PinInput.Root size='xs'>
      <PinInput.Field />
      <PinInput.Field />
      <PinInput.Field />
    </PinInput.Root>
  </HStack>

  <HStack>
    <PinInput.Root size='sm'>
      <PinInput.Field />
      <PinInput.Field />
      <PinInput.Field />
    </PinInput.Root>
  </HStack>

  <HStack>
    <PinInput.Root size='md'>
      <PinInput.Field />
      <PinInput.Field />
      <PinInput.Field />
    </PinInput.Root>
  </HStack>

  <HStack>
    <PinInput.Root size='lg'>
      <PinInput.Field />
      <PinInput.Field />
      <PinInput.Field />
    </PinInput.Root>
  </HStack>
</Stack>

Setting the initial value#

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

<HStack>
  <PinInput.Root defaultValue={['2', '3', '4']}>
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
</HStack>

Changing the placeholder#

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

<HStack>
  <PinInput.Root placeholder='🥳'>
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
</HStack>

Edit this page on GitHub