Secret Field

A read-only masked value, such as an API key, with reveal and copy buttons.

@drift-ui/secret-fieldRegistry JSONGitHubOpen in v0
Secret key
Hidden, ends in a1b2

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

secret-field-usage.tsx
import { SecretField } from "@/components/ui/secret-field"

export function ApiKeyRow() {
  return <SecretField aria-label="Live API key" value="sk_live_51Mz8a1b2" visibleChars={4} />
}

SecretField

A read-only masked value with a reveal toggle and a copy button. Copy gives the full value even while it is masked. Name it with aria-label or aria-labelledby.

Prop
valueRequiredstringThe secret to display and copy.
visibleCharsnumberDefault4Trailing characters left visible while masked. Values this short or shorter stay fully masked.
revealedbooleanControlled reveal state.
defaultRevealedbooleanDefaultfalseInitial reveal state when uncontrolled.
onRevealedChange(revealed: boolean) => voidCalled when the reveal button is toggled.

Other props go to the <div>.

Reveal all

Pass revealed and onRevealedChange to drive several fields from one button. Copy still gives the full value while a field is masked.

Publishable key
Hidden, ends in 9f3c
Secret key
Hidden, ends in a1b2
Webhook secret
Hidden, ends in E4n8
components/ui/secret-field.tsx
CtrlK