Masked API key field
A hidden API key that decodes character by character when revealed, with a copy button and another to regenerate it.
Settings
Code
<div class="uvq06-ak"><div class="hd"><label for="uvq06-ak-in">Secret key</label><span class="tg"><i></i>Production</span></div><div class="fd"><input id="uvq06-ak-in" readonly spellcheck="false"><button type="button" class="ey" aria-pressed="false" aria-label="Show key"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l18 18M10.6 5.6A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.8 3.6M6.6 6.6C3.9 8.3 2.5 12 2.5 12S6 18.5 12 18.5c1.8 0 3.3-.5 4.6-1.3M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg></button><button type="button" class="cp" aria-label="Copy key"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8.5" y="8.5" width="11" height="11" rx="2.5"/><path d="M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span class="tt" aria-hidden="true">Copied</span></button></div><div class="ft"><span>Created 3 days ago · last used today</span><button type="button" class="rg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 4.5V11h-6.5"/></svg><span>Regenerate</span></button></div><p class="sr" aria-live="polite"></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
A read-only field for secret keys, as seen in developer dashboards. The key shows only its prefix and last four characters; the eye button decodes the rest with a short scramble that settles left to right. Copy swaps the icon for a tick with a tooltip, and Regenerate spins its arrow, flashes the field and scrambles in a new key.
The main color tints the environment tag, the active eye and the regenerate link. Use it in settings pages, webhook setups and integration screens, and connect the copy and regenerate handlers to your own API when you move it to production.