Secret

Accessibility

Secret from @prepared911/ui/secret masks sensitive values (tokens, keys, phone numbers) while offering a toggle to reveal, copy, or regenerate them. The primitive wires the visibility toggle and copy action; your job is to label the field, announce state changes, and keep the reveal action obvious.

What the component handles

Visibility toggle. The reveal button toggles between masked and unmasked states and exposes aria-pressed.
Copy action. The copy button copies the underlying value and optionally fires a status message.
Masked output. Dots or fixed-width placeholder characters render by default.

What you must provide

Field label. A visible label ("API key", "Webhook secret") or an aria-label when none fits.
Revealed state announcement. When the value is revealed, the rotor should announce the change—use the toggle's pressed state, and pair a copy action with a Snackbar or live-region confirmation.
Destructive regenerate warnings. If regenerating a secret invalidates existing tokens, surface the consequence in a Banner before confirming.

Keyboard behavior

Tab / Shift+Tab move between the field, reveal button, and copy button.
Enter / Space activate the focused button.
The masked input accepts typing like a normal text field when editable.

Semantics and roles

Reveal button → role="button" with aria-pressed.
Copy button → role="button" with a descriptive label ("Copy API key").
Input → standard text or password input depending on whether the value is user-editable.

Copy confirmations should use a polite live region ("API key copied").
When a value is regenerated, announce the new state ("Secret regenerated; previous value invalidated").

Known caveats

Revealed secrets in shoulder-surfing contexts. Default to masked; auto-remask on blur or after a timeout for session safety.
Hidden copy buttons. Don't hide copy behind hover-only reveal; users on touch devices or assistive tech can't discover it.

Secret / API and Development

Segmented Control / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Known caveats

Secret

Accessibility

What the component handles

Visibility toggle. The reveal button toggles between masked and unmasked states and exposes aria-pressed.
Copy action. The copy button copies the underlying value and optionally fires a status message.
Masked output. Dots or fixed-width placeholder characters render by default.

What you must provide

Field label. A visible label ("API key", "Webhook secret") or an aria-label when none fits.
Revealed state announcement. When the value is revealed, the rotor should announce the change—use the toggle's pressed state, and pair a copy action with a Snackbar or live-region confirmation.
Destructive regenerate warnings. If regenerating a secret invalidates existing tokens, surface the consequence in a Banner before confirming.

Keyboard behavior

Tab / Shift+Tab move between the field, reveal button, and copy button.
Enter / Space activate the focused button.
The masked input accepts typing like a normal text field when editable.

Semantics and roles

Reveal button → role="button" with aria-pressed.
Copy button → role="button" with a descriptive label ("Copy API key").
Input → standard text or password input depending on whether the value is user-editable.

Copy confirmations should use a polite live region ("API key copied").
When a value is regenerated, announce the new state ("Secret regenerated; previous value invalidated").

Known caveats

Revealed secrets in shoulder-surfing contexts. Default to masked; auto-remask on blur or after a timeout for session safety.
Hidden copy buttons. Don't hide copy behind hover-only reveal; users on touch devices or assistive tech can't discover it.

Secret / API and Development

Segmented Control / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Known caveats