Input OTP

A native, highly configurable multi-slot password/PIN code entry field with state focus management.

Input OTP

A native, highly configurable multi-slot password/PIN code entry field with state focus management.

Preview

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Installation

pnpm dlx vibe-ui-kit@latest add input-otp

Examples

Explore layout variations including code length, character masking, disabled states, and splits.

4-Digit PIN

Split Separator

Masked Password Mode

Disabled State

Large custom sizes

Themes

Explore design aesthetics side-by-side.

Default

Glassmorphic

Retro Brutalist

Neon Glow

Cyberpunk

Props

Prop	Type	Default	Description
length	number	6	The count of digits/slots to render inside the field.
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual aesthetic theme to apply to the input slots.
disabled	boolean	false	Disables typing interactions on all slots.
type	'text' \| 'password' \| 'tel'	'text'	Enables text obscuring for secret password entries.

PreviousInput

Next Item

Contributors

Jenish Sabhadiya

Input OTP

Input OTP

Preview

Installation

Examples

Themes

Props

Contributors

Theme Customizer