shadcn-preact
Components

Input OTP

Accessible one-time password component with copy-paste functionality.

PreviewSource
1
2
3
4
5
6

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact cn@0.4.0 input-otp@1.5.0 lucide-preact@1.51.0 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects input-otp.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/input-otp --files LICENSE.md,registry/ui/input-otp.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/internals/types.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/input-otp/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/input-otp/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/input-otp. Existing components stay in place; shared source files are updated from main.

Selected source files (4)

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "./components/ui/input-otp"
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Examples

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

PatternSource
Preview
Example requirements

Also uses: Field.

bun add --exact input-otp@1.5.0

Separator

Use the <InputOTPSeparator /> component to add a separator between input groups.

SeparatorSource
Preview

Disabled

Use the disabled prop to disable the input.

DisabledSource
Preview

Controlled

Use the value and onChange props to control the input value.

ControlledSource
Preview

Invalid

Use aria-invalid on the slots to show an error state.

InvalidSource
Preview

Four Digits

A common pattern for PIN codes. This uses the pattern={REGEXP_ONLY_DIGITS} prop.

Four DigitsSource
Preview
Example requirements
bun add --exact input-otp@1.5.0

Alphanumeric

Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.

AlphanumericSource
Preview
Example requirements
bun add --exact input-otp@1.5.0

Form

FormSource
Preview
Example requirements

Also uses: Button, Card, Field.

bun add --exact lucide-preact@1.51.0

Reference

See the official Input OTP documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source