Verification code input components

FREE

Free and open-source React verification code input components built for modern applications and websites. These verification code inputs are built using Input OTP and styled with Tailwind CSS.

Verification code input example

0
0
0
0
0
0
This is a hint text to help user.

Installation

You can add this verification code input component using our CLI or manually:

npx untitledui@latest add pin-input

Verification code input examples

Below are examples and variations of this verification code input component:

Four digits

0
0
0
0
This is a hint text to help user.

With separator

0
0
0
0
0
0
This is a hint text to help user.

Input OTP

0
0
0
0
This is a hint text to help user.
0
0
0
0
This is a hint text to help user.
0
0
0
0
This is a hint text to help user.

Disabled

0
0
0
0
This is a hint text to help user.

Sizes

0
0
0
0
This is a hint text to help user.
0
0
0
0
This is a hint text to help user.
0
0
0
0
This is a hint text to help user.

API reference

Import the parts and assemble them:

import { PinInput } from "@/components/base/input/pin-input";
 
<PinInput>
    <PinInput.Label />
    <PinInput.Group maxLength={4}>
        <PinInput.Slot index={0} />
        <PinInput.Slot index={1} />
        <PinInput.Separator />
        <PinInput.Slot index={2} />
        <PinInput.Slot index={3} />
    </PinInput.Group>
    <PinInput.Description />
</PinInput>

HintText

Import HintText from @/components/base/input/hint-text. Renders React Aria’s Text — all of its props are supported.

HintText props
PropTypeDefaultDescription
children* (required)ReactNode—The helper text, or the error message when isInvalid is set.
isInvalidboolean—Indicates that the hint text is an error message.
size
"sm""md"
"md"Controls the hint's text size; sm renders it one step smaller. The text also shrinks automatically inside a small input field.
Props from React Aria Components (2)
HintText inherited props
PropTypeDefaultDescription
elementTypestring——
renderDOMRenderFunction<any, any>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput

Renders a <div> element.

PinInput props
PropTypeDefaultDescription
size
"xxxs""xxs""xs""sm""md""lg"
"md"Sets the dimensions, corner radius and type scale of every slot, plus the gap between them. Shared with the sub-components through context.
disabledbooleanfalseWhether the pin cannot be edited. Disables the underlying input and dims the slots.
invalidbooleanfalseWhether the entered pin failed validation. Renders the slots in the error style and marks each one aria-invalid.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Description

Renders HintText.

PinInput.Description props
PropTypeDefaultDescription
children* (required)ReactNode—The helper text, or the error message when isInvalid is set.
isInvalidboolean—Indicates that the hint text is an error message.
size
"sm""md"
—Controls the hint's text size; sm renders it one step smaller. The text also shrinks automatically inside a small input field.
Props from React Aria Components (2)
PinInput.Description inherited props
PropTypeDefaultDescription
elementTypestring——
renderDOMRenderFunction<any, any>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Group

Renders OTPInput.

PinInput.Group props
PropTypeDefaultDescription
inputClassNamestring—Additional classes for the hidden text input that sits behind the slots and receives the typing.
Props from input-otp (11)
PinInput.Group inherited props
PropTypeDefaultDescription
containerClassNamestring——
maxLengthnumber4—
noncestring——
noScriptCSSFallbackstring | null——
onChange((newValue: string) => unknown)——
onComplete((...args: any[]) => unknown)——
pasteTransformer((pasted: string) => string)——
pushPasswordManagerStrategy
"none""increase-width"
——
textAlign
"left""right""center"
——
valuestring——
renderInputOTPRenderFn——

Also accepts all standard input attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Label

Import Label from @/components/base/input/label. Renders React Aria’s Label — all of its props are supported.

PinInput.Label props
PropTypeDefaultDescription
children* (required)ReactNode—The label text, rendered before the required asterisk and the tooltip trigger.
isInvalidboolean—Whether the required asterisk is tinted with the error color. When left undefined, it follows the invalid state of the surrounding field instead.
isRequiredboolean—Whether the required asterisk is shown. When left undefined, it appears only if the surrounding field is marked required.
tooltipstring—Title text for a help tooltip. Setting it renders a help icon after the label that stays interactive even when the field is disabled.
tooltipDescriptionstring—Supporting text shown under the tooltip title. Only rendered when tooltip is set.
Props from React Aria Components (4)
PinInput.Label inherited props
PropTypeDefaultDescription
elementTypestring——
formstring——
htmlForstring——
renderDOMRenderFunction<"label", undefined>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Label

Renders Label.

PinInput.Label props
PropTypeDefaultDescription
children* (required)ReactNode—The label text, rendered before the required asterisk and the tooltip trigger.
isInvalidboolean—Whether the required asterisk is tinted with the error color. When left undefined, it follows the invalid state of the surrounding field instead.
isRequiredboolean—Whether the required asterisk is shown. When left undefined, it appears only if the surrounding field is marked required.
tooltipstring—Title text for a help tooltip. Setting it renders a help icon after the label that stays interactive even when the field is disabled.
tooltipDescriptionstring—Supporting text shown under the tooltip title. Only rendered when tooltip is set.
Props from React Aria Components (4)
PinInput.Label inherited props
PropTypeDefaultDescription
elementTypestring——
formstring——
htmlForstring——
renderDOMRenderFunction<"label", undefined>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Separator

Renders a <div> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Slot

Renders a <div> element.

PinInput.Slot props
PropTypeDefaultDescription
index* (required)number—Zero-based position of the slot in the group. Selects which character of the entered value it displays, whether it shows the caret, and what its aria-label announces.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

It's built on Input OTP, so install input-otp along with the component, as shown in the manual installation steps.

Set maxLength on PinInput.Group (it defaults to 4) and render one PinInput.Slot per digit, each with an index starting at 0.

Pass a pattern to PinInput.Group. The examples use REGEXP_ONLY_DIGITS from input-otp, as in pattern={REGEXP_ONLY_DIGITS}.

PinInput.Group passes its props to Input OTP's OTPInput, so use value and onChange for a controlled input and onComplete to run code, such as submitting the form, once every slot is filled.

Set size on the PinInput root to "xxxs", "xxs", "xs", "sm", "md" or "lg". The default is "md".

Set disabled or invalid on the PinInput root. Unlike the React Aria based inputs, these props are named disabled and invalid, not isDisabled and isInvalid.

Place PinInput.Separator between two slots, for example after the third slot of a six-digit code as in the with separator example. It renders a dash with role="separator".

Utility buttonsVideo players