--- meta: title: Reveal description: Reveals temporarily hide sensitive information and show it on hover or click, useful for displaying masked data like email addresses, passwords, or API keys. layout: component --- Reveals provide an interactive way to protect sensitive information while still making it accessible to users when needed. They're ideal for masking email addresses, phone numbers, API keys, or any other data that should be hidden by default but can be viewed on demand. ```html:preview ``` ## Examples ### Basic Usage A simple reveal that shows the full content on hover and hides it when the mouse leaves. ```html:preview ``` ### Email Address Masking Mask email addresses to protect them from bots and scrapers while still allowing users to view them. ```html:preview ``` ### API Key Protection Hide API keys and tokens by default, revealing them only when users interact with them. ```html:preview
API Key:
Secret:
``` ### With Duration (Temporary Reveal) Use the `duration` attribute to automatically hide the content after a specified time (in milliseconds) when clicked. ```html:preview

Click to reveal for 3 seconds

``` ### Permanent Toggle When `duration` is set to `0` or not provided while clicking, the reveal will toggle between states permanently until clicked again. ```html:preview

Click to toggle on/off

``` ### Short Duration Use shorter durations for quick peeks at sensitive information. ```html:preview

Click to reveal for 1.5 seconds

``` ### Long Duration Use longer durations when users need more time to read or copy the information. ```html:preview

Click to reveal for 5 seconds

``` ### Social Security Number Mask sensitive personal information like social security numbers. ```html:preview ``` ### Hover-Only Behavior Without a duration or with hover, the content is revealed only while hovering and hidden when the mouse leaves. ```html:preview
Username:
Email:

Hover to reveal

``` ### Click and Hover Combined When duration is set, clicking toggles temporarily while hovering still works. After clicking, the content remains revealed for the duration, and hovering won't hide it until the duration expires. ```html:preview

Hover to peek, click to lock for 4 seconds

``` ### Partial Masking Patterns Different approaches to masking information while still providing context. ```html:preview
Email (prefix):
Email (suffix):
Phone (last 4):
IP Address:
``` ### In a Table Use reveals within table cells to protect sensitive data in tabular layouts. ```html:preview
Name Email Phone
Alice Johnson
Bob Smith
``` ### In a Form Integrate reveals into forms for password fields or sensitive input displays. ```html:preview
``` ### Settings Panel Example A practical example showing credential management in a settings interface. ```html:preview

API Credentials

Manage your API access credentials

Public Key Active
Click to reveal for 5 seconds
Secret Key Sensitive
Click to reveal for 5 seconds
Webhook Secret Optional
Click to reveal for 5 seconds
``` ### User Profile Example Show masked personal information that can be revealed on demand. ```html:preview

Personal Information

Email:
Phone:
SSN:
Address:
``` ### Programmatic Control Control the reveal state programmatically using JavaScript. ```html:preview
Secret Code:
Trigger Click Trigger Hover Trigger Leave
``` ### State Monitoring Monitor when the reveal is shown or hidden using event listeners or observers. ```html:preview
Monitored Secret:
State: Hidden
Interactions: 0
``` ### Custom Styling Apply custom styles to match your design system. ```html:preview
``` ### Best Practices Here are some best practices when using the reveal component: 1. **Use appropriate masking patterns** - Show enough context (like email domain) so users know what they're revealing 2. **Set appropriate durations** - Use 3-5 seconds for data that needs to be copied, 1-2 seconds for quick verification 3. **Provide visual feedback** - Style the component so it's clear it's interactive 4. **Consider security context** - Use longer durations or permanent toggles for less sensitive data, shorter durations for highly sensitive data 5. **Add helper text** - Include instructions like "Click to reveal" or "Hover to show" when the interaction pattern isn't obvious 6. **Use in combination with other security measures** - Reveals are for UI convenience, not true security ```html:preview
✓ Good Example
API Key:
Click to reveal for 5 seconds. Last 4 digits shown for reference.
✗ Avoid This
No context about what this is or how to interact with it.
```