Input OTP

<InputOTP>TailwindCSS Modules

Separate input slots for verification codes, with keyboard navigation, paste, and one-time-code autofill.

InstallationColoxo CLI
npx coloxo add input-otp
ES Module ImportPlayground / npm package
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@coloxo/ui';

1. Variant Matrix

Enter a code, paste it from your clipboard, or use your device's one-time-code autofill.

FormatDefaultFilledDisabledInvalid
4-digit code
1
2
3
4
1
2
3
4
0
0
0
0
6-digit code
1
2
3
4
5
6
1
2
3
4
5
6
0
0
0
0
0
0

Six-digit verification code

Grouped with a separator

Four-digit PIN

Alphanumeric code

Disabled and invalid states

1
2
3
4
5
6
0
0
0
0
0
0

This code has expired. Request a new code.

2. Control heights (Sizes)

Choose small (36px), medium (44px), or large (52px) controls to match the surrounding form.

SizeHeightPreview
sm36px
md44px
lg52px

3. Interactive Props Configurator

Adjust the props to update the live preview and copy the generated code.

Visual Render Canvas
tsx
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@coloxo/ui";<InputOTP  maxLength={6}  size="md"  aria-label="Verification code">  <InputOTPGroup>    <InputOTPSlot index={0} />    <InputOTPSlot index={1} />    <InputOTPSlot index={2} />    <InputOTPSlot index={3} />    <InputOTPSlot index={4} />    <InputOTPSlot index={5} />  </InputOTPGroup></InputOTP>

4. Dark theme

Input OTPs adapt their background surfaces, focus rings, and error colors seamlessly in dark mode.

5. Enterprise layout compositions

Use verification codes for workspace sign-in and sensitive account actions. These examples demonstrate local form state; connect your verification service to validate codes.

Verify your workspace sign-in

Enter the six-digit code from your authenticator app.

0 of 6 digits entered.

Confirm a sensitive action

Verify your identity before changing workspace security settings.

Use the latest code sent to your work email.

Accessibility

Uses one native input for screen readers and autofill. Associate a label with its id and describe errors with aria-describedby and aria-invalid. Keyboard selection, deletion, and pasting work through the native input. Use one label for the full code. Visual slots are handled by the input-otp primitive.

Props

NameTypeDefaultDescription
maxLengthnumber—Required number of code characters. Slot indices must be below this value.
size"sm" | "md" | "lg"mdSlot control height: 36px, 44px, or 52px.
value / defaultValuestring—Controlled value or initial uncontrolled value.
onChange(value: string) => void—Called when the code changes.
onComplete(value: string) => void—Called when every character is filled.
patternstringREGEXP_ONLY_DIGITSAllowed characters. Use REGEXP_ONLY_DIGITS_AND_CHARS for alphanumeric codes.
pasteTransformer(text: string) => string—Normalize pasted codes, for example by removing hyphens.
disabledbooleanfalseDisables input interaction.
aria-invalidboolean—Marks an invalid code and displays error borders.
containerClassNamestring—Additional CSS class for the visual container.
indexnumber—InputOTPSlot only: zero-based character position.