Secret Field

ProNew

A read-only secret such as an API key, masked by default, with timed Reveal and Copy buttons that never reveal it and announce what happened.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it to show a credential that people need to copy but should not leave visible on screen: API keys, signing secrets, webhook tokens, recovery codes.

Do not use it as an input for typing a password; use password-input. Do not show secrets that are not the viewer's own.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/secret-field

Usage

API

SecretField

Prop	Type	Default	Description
`label`	`string`	-	Visible label; also builds the button names.
`value`	`string`	-	The secret.
`revealFor`	`number`	`10`	Seconds Reveal lasts. 0 keeps it until hidden.
`onCopy`	`() => void`	-	Called after a successful copy.

Accessibility

The value is a read-only password input with a visible label; Reveal is a toggle button (aria-pressed) whose name switches between Reveal and Hide.
Reveal hides the value again after revealFor seconds and says so in a polite status line.
Copy works without revealing and reports success or failure.

Keyboard

Key	Action
Tab	moves across the field, Reveal and Copy
Enter / Space	activates a button

Testing

The component ships a Testing Library test (secret-field.test.tsx) that covers masking, revealing and hiding, the reveal timeout and copying without revealing.

Guide and examples

When to use it

Use it to show a credential that people need to copy but should not leave visible on screen: API keys, signing secrets, webhook tokens, recovery codes.

Do not use it as an input for typing a password; use password-input. Do not show secrets that are not the viewer's own.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/secret-field

Usage

API

SecretField

Prop	Type	Default	Description
`label`	`string`	-	Visible label; also builds the button names.
`value`	`string`	-	The secret.
`revealFor`	`number`	`10`	Seconds Reveal lasts. 0 keeps it until hidden.
`onCopy`	`() => void`	-	Called after a successful copy.

Accessibility

The value is a read-only password input with a visible label; Reveal is a toggle button (aria-pressed) whose name switches between Reveal and Hide.
Reveal hides the value again after revealFor seconds and says so in a polite status line.
Copy works without revealing and reports success or failure.

Keyboard

Key	Action
Tab	moves across the field, Reveal and Copy
Enter / Space	activates a button

Testing

The component ships a Testing Library test (secret-field.test.tsx) that covers masking, revealing and hiding, the reveal timeout and copying without revealing.