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

Props

Name	Type	Required	Default	Description
themeOverride	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
expectedValue	string	yes		Literal string the operator must type before the field reports a match.
modelValue	string		""	Typed value (v-model).
placeholder	string		undefined	Optional placeholder; falls back to expectedValue when omitted.
labelLead	string		"Type"	Lead-in text rendered before the expected-value chip in the default label.
labelTail	string		"to confirm"	Trailing text rendered after the expected-value chip in the default label.
inputId	string		undefined	Explicit DOM id for the input; defaults to a Vue-generated id and is forwarded to the wrapping label.
class	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

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

Source

client/lib/form/confirm/TypedConfirmField.vue