Type to Confirm
An inline form that unlocks its confirm button only after the exact phrase is typed.
// Nothing has run yet
npx shadcn@latest add @sureui/type-to-confirm
import { TypeToConfirm } from "@/components/ui/sureui/type-to-confirm"<TypeToConfirm phrase="acme-prod" variant="destructive" confirmLabel="Delete project" onConfirm={deleteProject}/>Acknowledgements
Each sentence in acknowledgements adds a checkbox. The button unlocks once the phrase matches and every box is checked.
// Nothing has run yet
Several phrases
Pass phrase an array to ask for more than one field, such as the project name and a fixed sentence. The button unlocks once every field matches. With an array of phrases, label can be an array too, one label per field.
// Nothing has run yet
In a dialog
Confirm Dialog puts the same field in a dialog when you pass it phrase. caseSensitive, trim, acknowledgements and an array of phrases work the same way there.
// Nothing has run yet
Choices
Each item in choices adds a checkbox that doesn't block confirming. onConfirm receives their values by name, as they were when the person confirmed, and they reset to defaultChecked afterwards.
// Nothing has run yet
Consequences
Pass a Consequences list to show what the action removes, above the input.
// Nothing has run yet
Case and spaces
The phrase must match exactly. caseSensitive={false} ignores case, and trim ignores spaces at either end.
// Nothing has run yet
Labels and actions
label replaces the text above the input. renderActions wraps the confirm button, for example to add Cancel next to it.
// Nothing has run yet
TypeToConfirm
Renders a form.
| Prop | Type | Default |
|---|---|---|
| phrase | string | string[] | required |
| onConfirm | (choices: Record<string, boolean>) => void | Promise<unknown> | required |
| onCancel | () => void | — |
| onConfirmError | (error: unknown) => void | — |
| caseSensitive | boolean | true |
| trim | boolean | false |
| acknowledgements | string[] | [] |
| choices | { name: string, label: ReactNode, defaultChecked?: boolean }[] | [] |
| consequences | ReactNode | — |
| label | ReactNode | ReactNode[] | "Type {phrase} to confirm" |
| confirmLabel | ReactNode | "Confirm" |
| undoLabel | ReactNode | "Undo" |
| errorLabel | ReactNode | — |
| variant | Button variant | "default" |
| undo | boolean | number | "manual" | — |
| pauseUndoOnHover | boolean | true |
| pauseUndoOnFocus | boolean | true |
| renderActions | (confirmButton: ReactElement) => ReactNode | — |
| className | string | — |
| announcements | { match?, undo?, error? } | — |
- A matching phrase is announced in a polite live region. Change the text with
announcements. With several phrases, each field has its own label and announces its own match. - While
onConfirmis pending, the input is read-only and the button keeps focus. - The inputs and checkboxes clear after confirming, so an undone form isn't one click from running again.
onConfirmErroranderrorLabelwork as on Confirm Button. The form still clears, so a retry means typing the phrase again.
WCAG
- 2.2.1 Timing Adjustable:
undo="manual"meets it, since Undo has no time limit.