Redacted

Privacy-aware redaction styling — render sensitive values as black bars, with optional hover-reveal and label variants.

Why redaction needs styling

Agents generate reports containing sensitive data — API keys, personal information, internal identifiers. When the report structure matters but the values don't belong in the output, data-redacted renders them as opaque black bars. The document stays readable; the sensitive content stays hidden.

This is a presentation layer, not a security mechanism. The content is in the DOM. Use it for demos, screenshots, and shared reports — not for actual secrets in production.

Quick start

<!-- Inline redaction — renders as a black bar -->
<p>API key: <span data-redacted aria-label="redacted">sk-abc123xyz</span></p>

<!-- Block redaction — whole paragraph obscured -->
<p data-redacted aria-label="redacted content">
  Full name, address, and billing information removed.
</p>

API key: sk-abc123xyz

Full name, address, and billing information removed from this example.

Variants

Default — black bar

<span data-redacted aria-label="redacted">sensitive value</span>

Content is hidden, background is solid. Not selectable. Screen readers read the aria-label instead.

Reveal on hover

<span data-redacted="reveal">hover to see this value</span>

Hover here: you found it

The value is in the DOM but visually hidden. Hovering or focusing the element reveals it with a transition. Useful for QA reports or internal tools where the value should be accessible but not immediately visible.

Label

<span data-redacted="label"><span>sensitive value</span></span>

Contact: ludo@trentuna.com

Renders the text [REDACTED] in monospaced style. The inner content is hidden via display: none. Useful when you want to signal that something was removed without an ambiguous black bar.

Attributes

Block vs inline

Works on both inline and block-level elements. Block elements (p, div, section, article, li) get display: block and a minimum height so the bar is visible even when content is empty.

<!-- Inline: bar sized to text -->
<span data-redacted aria-label="redacted">short value</span>

<!-- Block: full-width bar with minimum height -->
<p data-redacted aria-label="redacted">
  This entire paragraph is redacted.
</p>

Inline: short value in a sentence.

This entire paragraph is redacted and would otherwise contain sensitive information about the subject.

Use in reports

A common pattern: a structured report with selective field redaction.

<article>
  <h2>Agent Session Report</h2>
  <dl>
    <dt>Session ID</dt>
    <dd>sess_2026-04-02-001</dd>

    <dt>API Key Used</dt>
    <dd><span data-redacted aria-label="redacted API key">sk-ant-api03-...</span></dd>

    <dt>User Email</dt>
    <dd><span data-redacted="label"><span>user@example.com</span></span></dd>

    <dt>Output</dt>
    <dd>47 files processed, 3 errors.</dd>
  </dl>
</article>

Accessibility

Always include aria-label on default redacted elements so screen readers announce something meaningful instead of silence:

<span data-redacted aria-label="API key, redacted">sk-abc123</span>

The reveal variant is focusable and will show on :focus — keyboard users can access the value. The label variant hides the inner content with display: none, which removes it from the accessibility tree entirely; screen readers will see nothing unless you add aria-label.

Notes for agents

• data-redacted does not remove content from the DOM — it hides it visually. Do not use for secrets in production.
• Prefer aria-label on all default redacted elements for screen reader users.
• For the label variant, wrap the actual content in a child element so the display: none rule can target it correctly.