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

# InputOTP

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

> The container for character groups and separators. The `group/input-otp` marker lets visible slots read invalid and disabled state from the native input. Each active slot owns its focus ring. Disabled inputs use disabled text colors without fading the container or separator.

Vue component: [InputOTP](/v3/reference/api/vue/InputOTP.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/InputOTP.md#theme-key-InputOTP-root) | `group/input-otp flex items-center gap-2 has-disabled:text-disabled-foreground` | The container for character groups and separators. The `group/input-otp` marker lets visible slots read invalid and disabled state from the native input. Each active slot owns its focus ring. Disabled inputs use disabled text colors without fading the container or separator. |

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

## root

> The container for character groups and separators. The `group/input-otp` marker lets visible slots read invalid and disabled state from the native input. Each active slot owns its focus ring. Disabled inputs use disabled text colors without fading the container or separator.

Default classes:

`group/input-otp flex items-center gap-2 has-disabled:text-disabled-foreground`

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