Forms

SecretField

A secret to copy once: an API key, a token, a recovery code. Read only and in mono, masked until asked, keeping the prefix and the last four so you can tell keys apart. The real value is not in the page until it is revealed; the copy button copies it either way and is named after what it copies. Copied is said out loud, politely, and a failed copy says so. Expired, the copy goes and an action takes its place.

view .md

Preview

api key

expired

Expired 2 days ago

Installation

terminal

bash

npx @entrepta/cli@latest add secret-field

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

secret-field.tsx

tsx

import { SecretField } from "@/components/entrepta/secret-field"

<SecretField name="API key" value={key} />

<SecretField
  name="API key"
  value={old}
  expired={{ message: "Expired 2 days ago", action: <Button size="sm">new key</Button> }}
/>

Props

Prop	Type	Default	Description
value	string	-	The secret
name	string	-	What it is: the field's name and "Copy API key"
mask	boolean	true	Dots until revealed
expired	{ message, action? } \| null	-	It no longer works
labels	{ copy?, copied?, copyFailed?, reveal?, hide? }	-	Every word