InputOTP

Source: client/lib/theme/vueda-tailwind/controls/index.js

The container for a row of fixed-width character slots. Owns the focus-ring contract for the active slot: a single focus-ring paints around whichever slot carries data-active=true (and swaps to destructive on aria-invalid), rather than each slot drawing its own ring. This keeps one ring sweeping across the row as the cursor advances.

Vue component: InputOTP

Slot	Default classes	Description
root	3 classes	The container for a row of fixed-width character slots. Owns the focus-ring contract for the active slot: a single focus-ring paints around whichever slot carries data-active=true (and swaps to destructive on aria-invalid), rather than each slot drawing its own ring. This keeps one ring sweeping across the row as the cursor advances.

root

The container for a row of fixed-width character slots. Owns the focus-ring contract for the active slot: a single focus-ring paints around whichever slot carries data-active=true (and swaps to destructive on aria-invalid), rather than each slot drawing its own ring. This keeps one ring sweeping across the row as the cursor advances.

Default classes:

flex items-center gap-2 has-disabled:opacity-50
has-[[data-active=true]]:focus-ring
aria-invalid:has-[[data-active=true]]:focus-ring-destructive

Source: client/lib/theme/vueda-tailwind/controls/InputOTP.theme.js:17