Descriptions Redacted Values

ProNew

A details list that masks sensitive fields (card number, API key, tax id) and reveals one at a time on request, hiding it again after a timeout.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

hideAfter1

Guide and examples

When to use it

Use this when a record shows personal or financial data to support or finance staff who sometimes need the full value and sometimes should not see it.

Do not use it when the value must never be visible in the browser (keep it on the server and show only a reference).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`details`	`RedactedDetail[]`	required	-
`hideAfter`	`number`	optional	Re-hide a revealed value after this many ms. Default 10000; 0 keeps it.
`onReveal`	`(label: string) => void`	optional	Called when someone reveals a value, for audit logging.

Accessibility

The reveal control is a toggle button (aria-pressed) named after its field.
The mask keeps the last four characters so people can recognise the value.
Only one value is revealed at a time and each hides itself after a timeout.

Testing

The pattern ships with a Testing Library test (descriptions-redacted-values.test.tsx) that covers masking, revealing one at a time with a callback, the timeout and hiding on a second press.

Guide and examples

When to use it

Use this when a record shows personal or financial data to support or finance staff who sometimes need the full value and sometimes should not see it.

Do not use it when the value must never be visible in the browser (keep it on the server and show only a reference).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`details`	`RedactedDetail[]`	required	-
`hideAfter`	`number`	optional	Re-hide a revealed value after this many ms. Default 10000; 0 keeps it.
`onReveal`	`(label: string) => void`	optional	Called when someone reveals a value, for audit logging.

Accessibility

The reveal control is a toggle button (aria-pressed) named after its field.
The mask keeps the last four characters so people can recognise the value.
Only one value is revealed at a time and each hides itself after a timeout.

Testing

The pattern ships with a Testing Library test (descriptions-redacted-values.test.tsx) that covers masking, revealing one at a time with a callback, the timeout and hiding on a second press.