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

# TypedConfirmField

## Overview

Anti-mistake confirmation field that gates a destructive action until the
operator types the exact `expectedValue`. The default chrome is the
canonical "type it to mean it" recipe: a bordered, muted-tinted box
containing a small sans label with an inline mono chip showing the
expected literal, followed by a mono text input.

Consumers read the match state via `v-model:match` (or the `match` event)
and disable their submit control while it is `false`. The raw typed value
is exposed via `v-model` for callers that need to inspect or echo it.

Theme entry: [TypedConfirmField](/v3/reference/theming/keys/TypedConfirmField.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-expectedValue">expectedValue</span> | `string` | yes |  | Literal string the operator must type before the field reports a match. |
| <span id="prop-modelValue">modelValue</span> | `string` |  | `""` | Typed value (v-model). |
| <span id="prop-placeholder">placeholder</span> | `string` |  | `undefined` | Optional placeholder; falls back to `expectedValue` when omitted. |
| <span id="prop-labelLead">labelLead</span> | `string` |  | `"Type"` | Lead-in text rendered before the expected-value chip in the default label. |
| <span id="prop-labelTail">labelTail</span> | `string` |  | `"to confirm"` | Trailing text rendered after the expected-value chip in the default label. |
| <span id="prop-inputId">inputId</span> | `string` |  | `undefined` | Explicit DOM id for the input; defaults to a Vue-generated id and is forwarded to the wrapping label. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the root. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `label` | yes | Override the label content. Default renders `{labelLead}` + an inline `<code>` chip + `{labelTail}`. Receives `expectedValue` and `chipClass` slot props. |

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

## Events

| Name | Description |
| --- | --- |
| `update:modelValue` | Emitted on every keystroke with the latest typed value. |
| `match` | Emitted whenever the match state crosses; payload is `true` when the typed value equals `expectedValue`. |

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

## Source

`client/lib/form/confirm/TypedConfirmField.vue`