Verification Code Input

A pin/OTP input for verification codes. Supports auto-focus, paste, keyboard navigation, separators, sizes, and disabled state.

Default

A 6-digit verification code input with label and description.

6-Digit Code

This is a hint text to help user.

4-Digit PIN

A shorter 4-digit input for PINs or short codes.

4-Digit PIN

Enter your 4-digit PIN.

With Separator

A 6-digit code split into two groups of 3 with a visual separator.

6-Digit with Separator (3 + 3)

This is a hint text to help user.

Disabled

A disabled verification code input that cannot be interacted with.

Disabled

This input is disabled.

Sizes

Three sizes: sm (36px), md (48px), and lg (60px).

Small / Medium / Large

Usage

Import the PinInput compound component and compose with sub-components.

tsx
import { PinInput } from "@/components/ui/PinInput";

// Basic 6-digit
<PinInput size="md" onComplete={(code) => console.log(code)}>
    <PinInput.Label>Secure code</PinInput.Label>
    <PinInput.Group maxLength={6}>
        <PinInput.Slot index={0} />
        <PinInput.Slot index={1} />
        <PinInput.Slot index={2} />
        <PinInput.Slot index={3} />
        <PinInput.Slot index={4} />
        <PinInput.Slot index={5} />
    </PinInput.Group>
    <PinInput.Description>Enter the code sent to your email.</PinInput.Description>
</PinInput>

// With separator (3+3)
<PinInput size="md">
    <PinInput.Label>Secure code</PinInput.Label>
    <PinInput.Group maxLength={6}>
        <PinInput.Slot index={0} />
        <PinInput.Slot index={1} />
        <PinInput.Slot index={2} />
        <PinInput.Separator />
        <PinInput.Slot index={3} />
        <PinInput.Slot index={4} />
        <PinInput.Slot index={5} />
    </PinInput.Group>
</PinInput>

Props

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Size of each slot.
disabledbooleanfalseDisable all slots.
onComplete(code: string) => void—Called when all slots are filled.
PinInput.LabelReactNode—Label above the pin group.
PinInput.Groupcomponent—Container for slots. Accepts maxLength prop.
PinInput.Slotcomponent—Individual digit input. Requires index prop.
PinInput.Separatorcomponent—Visual separator between slot groups.
PinInput.DescriptionReactNode—Hint/description text below the group.