# Type to confirm

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`.

- Registry name: `type-to-confirm` (`@candor/type-to-confirm`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/type-to-confirm

## Install

```bash
npx candor-ui add type-to-confirm
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/type-to-confirm`.
It brings in: button, input, locale, locked, utils.

## Example

```tsx
"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>

Props:

- `phrase: string`: What the person types: an account, a project, an environment's name.
- `action: string`: The action's label, as a verb: "Delete the account".
- `onConfirm: () => 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` (default `true`): Whether "PROD-EU" matches "prod-eu". On by default: the name is typed exactly.
- `busy?: boolean | undefined` (default `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` (default `"destructive"`): "destructive" (the default) for removal, "default" for a change that's serious but not a removal.
- `className?: string | undefined`

## Strings (`typeToConfirm`)

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

- `prompt`: Type {phrase} to confirm.
- `mismatch`: Type {phrase} exactly.
- `cancel`: Cancel
- `working`: Working…

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.