OTP Component

One-Time Password / PIN input container. Wrap multiple input elements inside .otp to create auto-sized square inputs with centered monospace text.

Notes

.otp uses inline-flex layout — inputs sit in a single row.
Each input becomes a square whose size is driven by the input-* class (e.g. input-10 → 40×40px).
OTP inherits input variant utilities: input-subtle, input-ghost, input-underline, input-outline, input-rounded.
For production use, pair with a JS script for auto-focus, arrow-key navigation, and Backspace-to-clear.

Sizes (input-6 ~ input-15)

24px (input-6)

28px (input-7)

32px (input-8, default)

36px (input-9)

40px (input-10)

44px (input-11)

48px (input-12)

52px (input-13)

56px (input-14)

60px (input-15)

Input style variants

Default border

input-subtle (soft background)

input-ghost (transparent)

input-underline (bottom line)

input-outline (thick border)

input-rounded (round corners)

Group (otp-group)

Default border group

Subtle group

Ghost group

Underline group

Outline group

Gutter modifiers

otp-gutter (default: spacing(2))

otp-gutter-1 (spacing(1))

otp-gutter-6 (spacing(6))

otp-gutter-[60px] (custom)

Theme colors

Primary

Secondary

Tertiary

Success

Error

Info

Highlight

Warning

Caution

Ink

Title

Description

Caption

Placeholder

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Tailwind colors

Raw / named colors

Digit count

4 digits

6 digits

6 digits (underline)

Interactive JS

Try typing digits, using arrow keys, or pressing Backspace.