InputOTPSlot

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

A single character cell. Borders use --input at the border-hairline width, and every non-first slot pulls left by exactly --vueda-hairline-width so adjacent slots overlap one device pixel and read as one painted line rather than doubling at the seam. The active slot promotes z-10 and swaps to border-ring so the run's active position outlines cleanly above its neighbours; aria-invalid="true" on the containing native input swaps every slot border and the active focus ring to --destructive. The active slot owns the focus ring, including across separated groups. Direct slot-level aria-invalid remains supported. First / last children round only their outer corners so the run reads as one chip. When the containing OTP input is disabled, slots use --disabled fill, --disabled-foreground ink, and --border edges with no shadow, including active or invalid slots.

Vue component: InputOTPSlot

Slot	Default classes	Description
root	7 classes	A single character cell. Borders use --input at the border-hairline width, and every non-first slot pulls left by exactly --vueda-hairline-width so adjacent slots overlap one device pixel and read as one painted line rather than doubling at the seam. The active slot promotes z-10 and swaps to border-ring so the run's active position outlines cleanly above its neighbours; aria-invalid="true" on the containing native input swaps every slot border and the active focus ring to --destructive. The active slot owns the focus ring, including across separated groups. Direct slot-level aria-invalid remains supported. First / last children round only their outer corners so the run reads as one chip. When the containing OTP input is disabled, slots use --disabled fill, --disabled-foreground ink, and --border edges with no shadow, including active or invalid slots.

root

A single character cell. Borders use --input at the border-hairline width, and every non-first slot pulls left by exactly --vueda-hairline-width so adjacent slots overlap one device pixel and read as one painted line rather than doubling at the seam. The active slot promotes z-10 and swaps to border-ring so the run's active position outlines cleanly above its neighbours; aria-invalid="true" on the containing native input swaps every slot border and the active focus ring to --destructive. The active slot owns the focus ring, including across separated groups. Direct slot-level aria-invalid remains supported. First / last children round only their outer corners so the run reads as one chip. When the containing OTP input is disabled, slots use --disabled fill, --disabled-foreground ink, and --border edges with no shadow, including active or invalid slots.

Default classes:

dark:bg-input/30 border-hairline border-input relative flex h-vueda-control w-vueda-control items-center justify-center text-sm shadow-vueda-control transition-all
first:rounded-l-md last:rounded-r-md [&:not(:first-child)]:[margin-left:calc(-1*var(--vueda-hairline-width))]
group-has-disabled/input-otp:!bg-disabled group-has-disabled/input-otp:!text-disabled-foreground group-has-disabled/input-otp:!border-border group-has-disabled/input-otp:shadow-none
data-[active=true]:z-10 data-[active=true]:border-ring aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive
group-has-[input[aria-invalid=true]]/input-otp:border-destructive
group-has-[input:enabled]/input-otp:data-[active=true]:focus-ring
group-has-[input[aria-invalid=true]]/input-otp:focus-ring-destructive aria-invalid:focus-ring-destructive

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