---
id: pin-input
category: form
title: Pin Input
package: '@chakra-ui/pin-input'
description:
  The PinInput component is similar to the Input component, but is optimized for
  entering sequences of digits quickly.
---

## Import

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

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

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

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

```jsx
<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`)

```jsx
<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:

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

Or even a partial defaultValue:

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

```jsx
<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 <kbd>Delete</kbd> is
pressed with focus on an empty input.

To disable this behavior, set `manageFocus` to `false`

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

```jsx
<HStack>
  <PinInput>
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>
```