# 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.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/secret-field

## Install

```bash
npx @entrepta/cli@latest add secret-field
```

Files: `primitives/secret-field.tsx`, `primitives/kbd.tsx`, `primitives/input.tsx`, `primitives/button.tsx`, `primitives/button-variants.ts`, `hooks/use-copy.ts`.
npm packages: `class-variance-authority`, `@phosphor-icons/react`, `@radix-ui/react-slot`.
Comes with: `kbd`, `input`, `button`, `use-copy`.

## Usage

```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 |