KQ-525 · TYPED/CONFIRM

Typed Confirm

A destructive confirmation that has to be spelled out. Each character that agrees with the phrase lights where it stands on flick, the shortest spring in the set, and the danger button fills from the left in proportion to the match on a plain tween — nothing overshoots, because destruction does not celebrate. A character that disagrees dims the fill instead of clearing it, only an exact match enables the button, and it is an alertdialog with a focus trap where Escape cancels.

KQ-525 · TYPED/CONFIRM

fernworks-prodLive

Region: eu-west-2
Volumes: 42
Last deploy: 4h ago
Owner: platform
Plan: dedicated

Match 0/14

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/typed-confirm

Props

phrase: string; default —; What must be typed exactly before the button wakes.
title / description: string; default —; Dialog copy; the description says what is lost and is wired to aria-describedby.
confirmLabel: string; default "Delete"; Button copy.
open / onOpenChange: boolean / (open: boolean) => void; default —; Controlled state; the dialog closes through onOpenChange on cancel, Escape, backdrop and confirm.
onConfirm: () => void; default —; Fires once, on a full match, when the button is pressed.
onMatchChange: (matched: number, total: number) => void; default —; Fires on every keystroke with the leading characters that match.
className: string; default —; Applied to the overlay that fills the nearest positioned ancestor.

Prop	Type	Default	Description
phrase	string	—	What must be typed exactly before the button wakes.
title / description	string	—	Dialog copy; the description says what is lost and is wired to aria-describedby.
confirmLabel	string	"Delete"	Button copy.
open / onOpenChange	boolean / (open: boolean) => void	—	Controlled state; the dialog closes through onOpenChange on cancel, Escape, backdrop and confirm.
onConfirm	() => void	—	Fires once, on a full match, when the button is pressed.
onMatchChange	(matched: number, total: number) => void	—	Fires on every keystroke with the leading characters that match.
className	string	—	Applied to the overlay that fills the nearest positioned ancestor.