Loading…

Confirm Typed

Type the name to confirm — and be told, not ignored, when it does not match.

Forms
1 file
No extra npm packages
Accessibility notes

Playground

Installation

The CLI installs button and input as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add confirm-typed

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ConfirmTyped } from "@/components/ui/confirm-typed";

Examples

Every example the tests run, live and operable, side by side.

Default
Pending
Case Insensitive
Not Destructive
In ADialog

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ConfirmTyped>

Prop	Type	Default
`action` (required) What confirming does, as the button reads: "Delete project".	`string`	—
`expected` (required) The text that must be typed, exactly.	`string`	—
`onConfirm` (required)	`() => void`	—
`caseSensitive` Match regardless of case. Off by default: a name is a name.	`boolean`	`true`
`onValueChange`	`(value: string) => void`	—
`pending` While the action runs. The button stays focusable and says so.	`boolean`	`false`
`value` The typed text. Controlled, if you want it.	`string`	—
`variant`	`"destructive" \| "primary"`	`"destructive"`
`children` The consequence, in a sentence or two, before the field.	`ReactNode`	—

Plus every attribute of <div> except children.

Accessibility

The button stays reachable while the text does not match: aria-disabled and drawn in the quieter outline style rather than disabled or faded, so its label keeps 4.5:1, and pressing it or Enter announces what was expected, marks the field invalid and returns focus to it — the common version disables the button and says nothing, so a keyboard user cannot tell whether anything happened. The match is announced once, on the transition, naming the action that became available, so nobody has to watch the button change colour. Typing itself stays silent, because a verdict on every keystroke is noise. The hint is the field's description and the button's, and the status region exists from the first render so the first announcement is heard. Pasting is allowed: blocking it punishes people who cannot type a long name easily and stops nobody who can select-all and copy.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

action

What confirming does, as the button reads: "Delete project".

string

—

expected

The text that must be typed, exactly.

string

—

onConfirm

() => void

—

caseSensitive

Match regardless of case. Off by default: a name is a name.

boolean

true

onValueChange

(value: string) => void

—

pending

While the action runs. The button stays focusable and says so.

boolean

false

value

The typed text. Controlled, if you want it.

string

—

variant

"destructive" | "primary"

"destructive"

children

The consequence, in a sentence or two, before the field.

ReactNode

—