Geist Design System

Destructive Confirmation Input

Type-to-confirm field for destructive actions that keeps the verification phrase exactly as written.

Default

Renders the To confirm, type … prompt above an input. The verification phrase is shown verbatim: the prompt is never title cased, and neither the prompt nor the typed value is rewritten by browser translation, autocorrect, autocapitalization, spellcheck, or autocomplete.

With error

The caller owns the value and the mismatch rule. Pass error to surface a message below the input.

Best Practices

When to use

  • Use DestructiveActionModal when the confirmation fits its fixed layout. Reach for this component only when a destructive flow needs content that modal can't render, such as a list of affected resources, a refund breakdown, or a sheet instead of a modal.
  • Use it for every type-to-confirm gate. Don't hand-roll the prompt with an Input label: Label title cases its text, which changes the phrase the user is asked to type.

Behavior

  • The caller decides when the gate opens. Compare the value to verificationPhrase with === and keep the destructive button disabled until it matches.
  • The ref is forwarded to the <input>, so it works with react-hook-form's register and with manual focus management.

Content

  • verificationPhrase: for entity deletes, use the resource name itself (my-project) and pair it with verificationLabel="project name" so the prompt reads To confirm, type the project name "my-project". Fall back to a lowercase verb phrase (disable vercel authentication) only when there's no entity to name.
  • Name the noun in mismatch errors: The project name must match exactly..

Accessibility

  • The input is associated with its prompt via aria-labelledby and htmlFor, so screen readers announce the full prompt, including the phrase, on focus. Don't pass a separate aria-label.

Was this helpful?

supported.