Type to confirm

Pro

A step that can't be undone, confirmed by typing a name: "Type prod-eu to confirm." The action stays locked, and says why, until the text matches exactly (spaces at either end don't count). Pasting is allowed, so nobody has to retype a name from memory. Nothing is filled in for the person, and the action never runs on Enter alone while the text doesn't match. Say what the step removes or changes just above it, in children.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/type-to-confirm

Brings in: button, input, locale, locked, utils

Usage

TSX · The example above

"use client"

import * as React from "react"
import { TypeToConfirm } from "@/components/type-to-confirm"
import { Button } from "@/components/ui/button"

export default function Example() {
  const [open, setOpen] = React.useState(true)
  const [done, setDone] = React.useState(false)
  if (done) return <p className="text-sm">The staging environment is being deleted.</p>
  if (!open) return <Button variant="outline" onClick={() => setOpen(true)}>Delete environment…</Button>
  return (
    <TypeToConfirm className="max-w-md" phrase="staging-eu" action="Delete the environment" onConfirm={() => setDone(true)} onCancel={() => setOpen(false)}>
      Deleting <strong>staging-eu</strong> removes its database, its files and 14 scheduled jobs. It can’t be undone.
    </TypeToConfirm>
  )
}

<TypeToConfirm>

Prop	Type	Default	Description
phraserequired	`string`	—	What the person types: an account, a project, an environment's name.
actionrequired	`string`	—	The action's label, as a verb: "Delete the account".
onConfirmrequired	`() => void`	—	Called once the text matches and the action is pressed (or Enter is pressed in the box).
onCancel	`(() => void) \| undefined`	—	Shows Cancel, and is called when it's pressed or Escape is pressed in the box.
children	`React.ReactNode \| undefined`	—	What the step does and what it can't take back, in the app's words. Shown above the box.
prompt	`React.ReactNode \| undefined`	—	The box's label, in place of "Type {phrase} to confirm.".
mismatch	`string \| undefined`	—	Why the action is locked while the text doesn't match, in place of "Type {phrase} exactly.".
matchCase	`boolean \| undefined`	true	Whether "PROD-EU" matches "prod-eu". On by default: the name is typed exactly.
busy	`boolean \| undefined`	false	The step is running: the action shows it and can't be pressed again.
locked	`string \| undefined`	—	Why the viewer can't take this step at all, whatever they type.
tone	`"destructive" \| "default" \| undefined`	"destructive"	"destructive" (the default) for removal, "default" for a change that's serious but not a removal.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under typeToConfirm in <LocaleProvider strings={{ … }}>; the table is exported as typeToConfirmStrings.

Key	English
prompt	Type {phrase} to confirm.
mismatch	Type {phrase} exactly.
cancel	Cancel
working	Working…