OTP Input
Input for one-time passwords and verification codes, with split digit cells, grouped layouts, error states, and autofill.
import { OTPInput } from "@plexui/vue/components/OTPInput";Examples
Overview
Filled state
Grouped (3+3)
With error
Disabled
API
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of digit cells |
value / v-model:value | string | — | Controlled value; `update:value` fires on every change |
@change | (value: string) => void | — | Fires when the value changes |
@complete | (value: string) => void | — | Fires when all digits are filled |
grouping | number[] | — | Grouping pattern with extra gap (e.g. [3,3]) |
invalid | boolean | false | Invalid visual state |
error-message | string | — | Error message below the input |
disabled | boolean | false | Disable all cells |
auto-focus | boolean | false | Auto-focus first cell on mount |
class | string | — | Applied to the root element |
Each digit stays in its own cell: typing into a later empty cell keeps the digit there, and clearing a cell in the middle does not move the others. The value is the filled digits in order. Pasting or typing several digits writes them from the focused cell onward.
Styling
OTP Input reads these component tokens. Override them at any scope to restyle it:
--field-error-margin-top: error margin top (default0.5rem)--floating-input-background: background (defaultvar(--color-surface))--floating-input-border-color: border color--floating-input-border-color-focus: border color focus (defaultvar(--alpha-50))--floating-input-border-color-hover: border color hover--floating-input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--floating-input-border-radius: border radius (defaultvar(--radius-full))--floating-input-transition-duration: transition duration (default80ms)