/// Data Display
MaskedValue
A sensitive value shown as bullets until an explicit reveal, with optional auto re-mask and copy.
import { MaskedValue } from "@protocore/pds";Basics
Pass the clear value and a label. The value stays masked as a fixed run of bullets (leaking no length) until the eye button is clicked. The label names the value in the reveal button's aria-label.
Copy & auto re-mask
Set copyable for a copy button that writes the clear value, and timeout (ms) to auto re-mask a reveal after a delay — so a shoulder-surfed secret doesn't linger on screen.
Custom mask form
Override masked to reveal a partial hint — the last four of a card, or a bespoke placeholder. Only the value is ever copied or exposed on reveal.
When to use it
MaskedValue is for secrets that must render in place but stay hidden by default — API keys, signing secrets, seed phrases, card numbers. The reveal is always an explicit, deliberate click, and timeout re-hides it automatically.
Use CodeRef for identifiers that are *not* secret (tx hashes, request ids) — those show their value immediately. When secrets appear inside a structured object, JsonViewer auto-masks sensitive keys for you, so prefer it over hand-masking each field.
Usage
Do
- Use it for anything that shouldn't sit in plaintext on screen — keys, secrets, seeds.
- Set a `timeout` so reveals re-mask themselves after a few seconds.
- Give a precise `label` — it becomes the reveal/copy button's accessible name.
- Use the default bullet mask when the value's length is itself sensitive.
Don't
- Don't use it as decoration for non-secret ids — that's CodeRef.
- Don't leak the full length via a custom `masked` unless that's intended.
- Don't assume masking is a security boundary — the value is still in the DOM once revealed.
- Don't hand-mask fields inside a JSON blob; let JsonViewer's key patterns do it.
Accessibility
| Keys | Action |
|---|---|
| Tab | Moves focus between the reveal button and (when present) the copy button. |
| Enter / Space | Toggles reveal, or copies the clear value. |
- The reveal button exposes `aria-pressed` reflecting the shown/hidden state, and its label swaps between `Reveal <label>` and `Hide <label>`.
- The copy button is labelled `Copy <label>`.
- Icons are inline decorative SVG (`aria-hidden`); the accessible name comes entirely from the labels.
MaskedValue props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
copyable | boolean | false | Render a copy button that copies the clear value. |
label | string | value | What this is, for the reveal button's aria-label (e.g. "API key"). |
masked | string | •••••••• | Masked display form. Defaults to a fixed run of bullets (leaks no length). |
style | CSSProperties | — | |
timeout | number | — | Auto re-mask this many ms after a reveal. Omit to stay revealed. |
value * | string | — | The sensitive clear value — only rendered after an explicit reveal. |