Pin Input

Usage

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

<PinInput.Root>
  <PinInput.HiddenInput />
  <PinInput.Control>
    <PinInput.Input />
  </PinInput.Control>
</PinInput.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Sizes

Pass the size prop to the PinInput.Root component to change the size of the pin input component

One time code

Pass the otp prop to the PinInput.Root component to make the pin input component behave like a one-time code input. This helps improve the user experience when entering OTP codes

Mask

Pass the mask prop to the PinInput.Root component to obscure the entered pin code

Placeholder

Pass the placeholder prop to the PinInPut.Root component to add a placeholder to the pin input

Field

Here's an example of how to compose the Field and the PinInput components

Hook Form

Here's an example of how to compose the Field and the PinInput components with react-hook-form

Controlled

Pass the value and onValueChange props to the PinInPut.Root component to control the value of the pin input

Store

An alternative way to control the pin input is to use the RootProvider component and the usePinInput store hook.

This way you can access the pin input state and methods from outside the component.

Attached

Pass the attached prop to the PinInput.Root component to attach the pin input to the input field

Alphanumeric

Pass the type prop to the PinInput.Root component to allow the user to enter alphanumeric characters. Values can be either alphanumeric, numeric, or alphabetic

Closed Component

Here's how to setup the Pin input for a closed component composition.

Usage

<PinInput mask />

Props

Root

Explorer

Explore the Pin Input component parts interactively. Click on parts in the sidebar to highlight them in the preview.