Pin Input

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

The most common application is for entering OTP or security codes.

Import#

import { PinInput, PinInputField } from "@chakra-ui/core"

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

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

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

Changing the size of the Input#

There are three sizes of an Input:

• sm (24px)
• md (32px)
• lg (40px)

<Stack>
  <Box>
    <HStack>
      <PinInput size="lg">
        <PinInputField />
        <PinInputField />
        <PinInputField />
      </PinInput>
    </HStack>
  </Box>
  <Box>
    <HStack>
      <PinInput size="md">
        <PinInputField />
        <PinInputField />
        <PinInputField />
      </PinInput>
    </HStack>
  </Box>
  <Box>
    <HStack>
      <PinInput size="sm">
        <PinInputField />
        <PinInputField />
        <PinInputField />
      </PinInput>
    </HStack>
  </Box>
</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#

If you donʼt like the default placeholder (○), you can change that too.

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