---
url: "https://vueda.dev/v3/reference/theming/keys/InputOTPSlot.md"
title: "InputOTPSlot"
---

# 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](/v3/reference/api/vue/InputOTPSlot.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/InputOTPSlot.md#theme-key-InputOTPSlot-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. |

<a id="theme-key-InputOTPSlot-root"></a>

## 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:

```text
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`