Secret

Conceals sensitive content with a blur, mask, or noise effect, revealing it on user interaction.

123-45-6789

Usage

forge-secret conceals its default-slot content until a user reveals it, through open, variant (blur, masked, or noise), block, buttonPosition, showOnHover, and name. Use it for sensitive values a user might not want visible by default, like an account number or password, in a context where someone else could be looking at the screen.

Not a security control

Concealed content is still present in the DOM and can be read from the page source — forge-secret only prevents visual exposure. It’s useful for shoulder-surfing and accidental-glance protection, but it does not protect against a determined user. The only way to truly secure sensitive information is to not send it to the client at all.

Rules

Use a secret for a value someone might not want visible by default, like an account number.

Set name to group related secrets so revealing one conceals the others.

Set block for a secret that wraps a larger piece of content, like a paragraph or image.

Don't

Don't treat a secret as a security boundary — the concealed content is still in the DOM and page source.

Don't use a secret for content that's fine to always show — it adds an interaction step with no benefit.

Basic usage

Content stays concealed until a user clicks the reveal button.

A secret concealing inline content until revealed.

<forge-secret style="Symbol(lit-nothing)" name aria-label="secret">
  Secret content here
</forge-secret>

Named groups

Give multiple secrets the same name and they behave like a radio group — revealing one conceals any other open secret sharing that name.

Secrets sharing a name, so revealing one conceals the others.

<div style="display: flex; flex-direction: column; gap: 16px;">
  <forge-secret name="secrets" aria-label="secret">
    Lorem ipsum
  </forge-secret>
  <forge-secret name="secrets" aria-label="secret">
    Dolor sit amet
  </forge-secret>
  <forge-secret name="secrets" aria-label="secret">
    Consectetur adipiscing elit
  </forge-secret>
</div>

Block layout

Set block for a secret that wraps a larger piece of content, like a paragraph or image, instead of displaying inline with surrounding text.

A block secret concealing a larger piece of content.

<forge-secret block name aria-label="secret">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</forge-secret>

A component that conceals content with a blur or dot mask, revealing it on user interaction.

import "@tylertech/forge/secret";

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Whether the secret content is visible.
`variant`	`variant`	`SecretVariant`	`'blur'`	The style applied to hidden content when the secret is set to inline. Possible values are blur, masked, and noise.
`mask`	`mask`	`string`	`''`	The mask pattern to use with the masked variant. When empty the slotted text content is used as the mask.
`maskCharacter`	`mask-character`	`string`	`'●'`	The character to replace characters with in the masked variant.
`unmaskedCharacters`	`unmasked-characters`	`string`	`''`	Characters that will not be replaced by the mask character in the masked variant.
`block`	`block`	`boolean`	`false`	Whether the secret content should be displayed as a block element instead of inline with text.
`buttonPosition`	`button-position`	`SecretButtonPosition`	`'end'`	The position of the button when the secret is set to inline. Possible values are start and end.
`showOnHover`	`show-on-hover`	`boolean`	`false`	Whether to reveal content on hover/focus in addition to clicks.
`name`	`name`	`string`	`''`	When set, secrets with the same name will close when another secret with that name is opened.

Events

Name	Type	Description
`toggle`	`ToggleEvent`	Dispatched when the secret opens or closes.

Slots

Name	Description
`(default)`	Default slot for the secret content.
`close-icon`	An icon that is shown when the secret is open, indicating it can be closed.
`open-icon`	An icon that is shown when the secret is closed, indicating it can be opened.
`label`	Text content that appears in the tooltip attached to the button or as the button text when set to block.

CSS Parts

Name	Description
`::part(root)`	The root container.
`::part(content)`	The content container.
`::part(button)`	The toggle button element.
`::part(text-button)`	The toggle button element when the secret is set to block.

CSS Custom Properties

Name	Description
`--forge-secret-blur`	The radius of the blur effect.
`--forge-secret-button-background`	The background color of the button.
`--forge-secret-button-color`	The text and icon color of the button.
`--forge-secret-button-shape`	The button's border radius.
`--forge-secret-button-padding`	The inline padding around the button or inline and block padding around the text button.
`--forge-secret-button-size`	The button's width and height.
`--forge-secret-icon-size`	The icon's size.
`--forge-secret-text-button-shape`	The text button's border radius.
`--forge-secret-text-decoration-line`	The decoration line applied to open inline content.
`--forge-secret-text-decoration-style`	The style of the text decoration line.
`--forge-secret-text-decoration-color`	The color of the text decoration line.
`--forge-secret-text-underline-offset`	The spacing between the inline content and the text decoration line.
`--forge-secret-transition-duration`	The duration of transitions.
`--forge-secret-transition-easing`	The timing function of transitions.

Roles and states

forge-secret uses role="group" to semantically group its content with the reveal button. The button carries aria-expanded to convey whether the content is currently visible, and aria-controls to associate it with the group. When content is revealed, that change is announced to screen readers through a live region. While concealed, the content is marked inert so it can’t receive keyboard focus or be read by assistive technology.

Keyboard interaction

The reveal button is focusable and can be toggled with Enter or Space. Pressing Escape while a secret is open closes it. Clicking the concealed content itself also reveals it and moves focus to the button.