---
url: "https://vueda.dev/v3/reference/api/vue/WidgetOTPInput.md"
title: "WidgetOTPInput"
---

# WidgetOTPInput

## Overview

A one-time code widget that renders an InputOTP with form field integration.
Used for verification codes when paired with FormField. Renders one slot per character
unless the default slot supplies its own groups and slots.

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-name">name</span> | `String` |  | `undefined` | The widget name; falls back to the field context value when omitted. |
| <span id="prop-label">label</span> | `String` |  | `undefined` | The label displayed next to the widget; falls back to the field context value when omitted. |
| <span id="prop-help">help</span> | `String` |  | `undefined` | Help text displayed alongside the widget; falls back to the field context value when omitted. |
| <span id="prop-readOnly">readOnly</span> | `Boolean` |  | `false` | Whether the widget is read-only; falls back to the field context value when omitted. |
| <span id="prop-required">required</span> | `Boolean` |  | `undefined, // let the default from field context take over` | Whether the widget is required; falls back to the field context value when undefined. |
| <span id="prop-modelValue">modelValue</span> | `String\|Number\|Boolean\|Array\|Object` |  | `undefined` | The widget's bound value (v-model); used only in contextless mode. |
| <span id="prop-fieldToWidget">fieldToWidget</span> | `Object\|Function` |  | `null` | Adapter that converts the form model value into a value suitable for the widget UI. |
| <span id="prop-widgetToField">widgetToField</span> | `Object\|Function` |  | `null` | Adapter that converts the widget UI value back into a form model value for validation and submission. |
| <span id="prop-invalid">invalid</span> | `Boolean` |  | `undefined` | Manually set the invalid state when not in a field context. |
| <span id="prop-warning">warning</span> | `Boolean` |  | `undefined` | Manually set the warning state when not in a field context. |
| <span id="prop-disabled">disabled</span> | `Boolean` |  | `false` | Whether the widget is disabled. |
| <span id="prop-disabledFn">disabledFn</span> | `Function` |  | `null` | A function that returns whether the widget should be disabled; takes precedence over the disabled prop. |
| <span id="prop-contextless">contextless</span> | `Boolean` |  | `false` | When true, the widget ignores any surrounding field or form context and manages its own state. |
| <span id="prop-displayDependencies">displayDependencies</span> | `Array` |  | `() => []` | Field paths whose values the widget needs for display logic; registered with the field context. |
| <span id="prop-maxlength">maxlength</span> | `number` |  | `6` | The number of characters in the code. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `default` | yes | Override the character slots; receives vue-input-otp's slot props. |

[Full slot reference](/v3/reference/api/vue/WidgetOTPInput/slots.md)

## Events

| Name | Description |
| --- | --- |
| `update:modelValue` | Emitted when the widget value changes. |

[Full event reference](/v3/reference/api/vue/WidgetOTPInput/events.md)

## Source

`client/lib/widgets/WidgetOTPInput.vue`