# PII redaction
> Shows text next to what a model would see, with names, emails, IBANs and phone numbers swapped for placeholders like EMAIL_1.
- Element: `<hf-redact>`
- React: `import { HfRedact } from "@/components/lumesec/hf-redact"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-redact.json
- Page: https://elements.lumesec.ai/components/pixel-hd/redact



Live preview: https://elements.lumesec.ai/view/hf-redact

```html
<hf-redact names="Anna Berger"></hf-redact>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-redact
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-redact.json
```

## Usage

React:

```tsx
import { HfRedact } from "@/components/lumesec/hf-redact";

export function Example() {
  return (
    <HfRedact names="Anna Berger" />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-redact.js"></script>

<hf-redact names="Anna Berger"></hf-redact>
```

## Behaviour

Finds names, emails, IBANs and phone numbers and shows what the model would see instead. Placeholders resolve out of noise; switching off dissolves the chips back to the original text. Edit the text to try your own.

## API reference

### Attributes

| Attribute | React prop | Type     | Default                        | Description                                                            |
| --------- | ---------- | -------- | ------------------------------ | ---------------------------------------------------------------------- |
| `names`   | `names`    | `string` | `Anna Berger`                  | Comma-separated names to redact, matched exactly and case-sensitively. |
| `label`   | `label`    | `string` | `Before it leaves your device` | Heading text. Read once on connect.                                    |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail                                | Description                                                                                                                                                                      |
| -------- | ---------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ redacted: boolean, text: string }` | Fires on connect, when the Redact switch changes and 160 ms after the text is edited. `text` is the output pane: placeholders when `redacted` is `true`, the original otherwise. |

### Properties

| Property            | Type       | Description         |
| ------------------- | ---------- | ------------------- |
| `names` (read-only) | `string[]` | The parsed `names`. |

## Accessibility

* The Redact control is a button with `role="switch"` and `aria-checked`.
* The input is a `<textarea>` inside a `<label>`, with `aria-label="Your text"`.
* The output pane is an `aria-live="polite"` region, so the whole output is announced after each change.
* Placeholder highlights are drawn on an `aria-hidden` canvas; the placeholders themselves are text.
* Reduced motion: placeholders appear without resolving out of noise, switching off shows the original text without the dissolve, and the count changes without rolling.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-font`, `--ui-mono`, `--ui-muted`, `--ui-surface` and `--ui-track`.

## Notes

* The initial text is the element's text content, read once on connect; without it a built-in sample is used.
* Detection is a demo: simple patterns for email addresses, IBANs and international phone numbers starting with `+`, plus the `names` list. It is not a complete PII detector, and it runs in the browser.
* Placeholders are numbered per kind in order of appearance: `NAME_1`, `EMAIL_1`, `IBAN_1`, `PHONE_1`.
* The two panes sit side by side when each can be 240px wide and stack otherwise.