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.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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#

Each input collects one value (number or alphanumeric) 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>

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

Editable Example

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>

<HStack>
  <PinInput type="alphanumeric">
    <PinInputField />
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Editable Example

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>

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

Editable Example

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>

<HStack>
  <PinInput type="alphanumeric" mask>
    <PinInputField />
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Editable Example

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>

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

Editable Example

Adding a defaultValue#

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

<HStack>
  <PinInput defaultValue="234">
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

<HStack>
  <PinInput defaultValue="234">
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Editable Example

Or even a partial defaultValue:

<HStack>
  <PinInput defaultValue="23">
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

<HStack>
  <PinInput defaultValue="23">
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Editable Example

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>

<HStack>
  <PinInput placeholder="🥳">
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Editable Example

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>

<HStack>
  <PinInput manageFocus={false}>
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>

Editable Example

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>

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

Editable Example

Props#

`autoFocus`

Description

If true, the pin input receives focus on mount

Type

boolean

`children`

Description

The children of the pin input component

Type

ReactNode

`colorScheme`

Description

Color Schemes for PinInput are not implemented in the default theme. You can extend the theme to implement them.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`defaultValue`

Description

The default value of the pin input

Type

string

`errorBorderColor`

Description

The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"

Type

string

`focusBorderColor`

Description

The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"

Type

string

`id`

Description

The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id. @example if id="foo", the first input will have `foo-0`

Type

string

`isDisabled`

Description

If true, the pin input component is put in the disabled state

Type

boolean

`isInvalid`

Description

If true, the pin input component is put in the invalid state

Type

boolean

`manageFocus`

Description

If true, focus will move automatically to the next input once filled

Type

boolean

Default

true

`mask`

Description

If true, the input's value will be masked just like `type=password`

Type

boolean

`onChange`

Description

Function called on input change

Type

((value: string) => void)

`onComplete`

Description

Function called when all inputs have valid values

Type

((value: string) => void)

`otp`

Description

If true, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.

Type

boolean

`placeholder`

Description

The placeholder for the pin input

Type

string

`size`

Type

"sm" | "md" | "lg" | "xs"

Default

"md"

`type`

Description

The type of values the pin-input should allow

Type

"number" | "alphanumeric"

`value`

Description

The value of the the pin input. This is the value that will be returned when the pin input is filled

Type

string

`variant`

Type

"outline" | "unstyled" | "filled" | "flushed"

Default

"outline"

PinInputField#

PinInputField composes Input so you can pass all Input props.

`colorScheme`

Description

Color Schemes for Input are not implemented in the default theme. You can extend the theme to implement them.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`errorBorderColor`

Description

The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"

Type

string

`focusBorderColor`

Description

The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"

Type

string

`isDisabled`

Description

If true, the form control will be disabled. This has 2 side effects: - The FormLabel will have `data-disabled` attribute - The form element (e.g, Input) will be disabled

Type

boolean

`isFullWidth`

Description

If true, the input element will span the full width of its parent @deprecated This component defaults to 100% width, please use the props maxWidth or width to configure

Type

boolean

`isInvalid`

Description

If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true

Type

boolean

`isReadOnly`

Description

If true, the form control will be readonly

Type

boolean

`isRequired`

Description

If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true

Type

boolean

`size`

Type

"sm" | "md" | "lg" | "xs"

Default

"md"

`variant`

Type

"outline" | "unstyled" | "filled" | "flushed"

Default

"outline"

Edit this page