PII chipPro

Detected personal data inline with redact and keep, and a summary with Redact all.

Markdown

On this page

ProA draft about a deposit with an address, phone, email and bank account found.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/pii-chip

Usage

tsx

import { PiiChip, PiiProvider, PiiSummary } from "@/components/ui/chatcn/pro/pii-chip"

<PiiProvider items={found}>
  <PiiSummary />
  <p>
    Reach me on <PiiChip id="phone" kind="phone" value="+44 7700 900412" />.
  </p>
</PiiProvider>

Detected values stay readable inside an amber hairline with their kind's glyph, because they need a decision. Redacted values become a solid ink bar the same width as the value, labelled with the kind in mono, so the sentence never reflows and the reader still knows what was there. Kept values get a faint dotted underline and stay clickable. The provider shares decisions, so Redact all flips every chip and each chip updates the count.

Examples

States

ProEach status, every kind, a settled summary and nothing found.

Props

Prop	Type	Notes
`kind`	`"email" \| "phone" \| "card" \| "address" \| "id" \| "name" \| "iban" \| "birthdate"`	Sets the glyph, label and placeholder
`value`	`string`	The detected text
`id`	`string`	Links the chip to a provider item
`status`, `defaultStatus`, `onStatusChange`	`"detected" \| "redacted" \| "kept"`	Controlled or uncontrolled
`PiiProvider` `items`	`{ id, kind, value }[]`	Everything found; also takes `status`, `defaultStatus`, `onStatusChange`
`PiiSummary` `where`	`string`	Default "in this message"
`labels`	`Partial<PiiLabels>`	Every string and kind name, for translation. Set once on `PiiProvider` or per chip

Keyboard

Key	Action
Tab	Move between chips
Enter or Space	Open Redact and Keep for a chip
Esc	Close without deciding

Accessibility

Each chip is a button named by its kind and value, or Redacted and its kind once redacted.
The summary is a status region, so Redact all and Undo are announced.
Amber is never alone: detected values carry a kind glyph, and the summary counts them in words.

Motion

Status changes are color and fill only, 150 ms. The popover grows from the chip in 180 ms. Nothing moves under reduced motion.