Digit Input - HapplyUI

An OTP/digit input component with configurable number of slots, error, and disabled states.

Installation

bunx @happlyui/cli@latest add digit-input

Dependencies

npm packages

react-otp-input

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
happly-ui-utils

Usage

import * as DigitInput from "@/components/ui/digit-input"

<DigitInput.Root numInputs={4} onChange={setValue} value={value} />

Examples

Demo

Basic 4-digit input.

<DigitInput.Root numInputs={4} onChange={setValue} value={value} />

Has Error

Digit input in error state.

<DigitInput.Root hasError numInputs={4} onChange={setValue} value={value} />

Disabled

Disabled digit input.

<DigitInput.Root disabled numInputs={4} onChange={setValue} value={value} />

Square

Square-shaped digit input slots.

<DigitInput.Root numInputs={4} onChange={setValue} value={value} className="justify-center [&>input]:aspect-square [&>input]:w-auto" />

With Form Field

Digit input composed with FormField for consistent label and hint.

Verification Code

Enter the 5-digit code sent to your email.

<FormField.Root
  label="Verification Code"
  hint="Enter the 5-digit code sent to your email."
>
  <DigitInput.Root numDigits={5} />
</FormField.Root>

API Reference

DigitInput.Root

The digit input component. Wraps react-otp-input.

Prop	Type	Default	Description
`numInputs`	`number`	-	Number of input slots
`value`	`string`	-	Current input value
`onChange`	`(value: string) => void`	-	Callback when the value changes
`hasError`	`boolean`	`false`	Show error styling with red ring
`disabled`	`boolean`	`false`	Disable all input slots