API Key Field

ProNew

A read-only field that masks a secret key and has buttons to reveal, copy and regenerate it.

Customize

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


pnpm dlx shadcn@latest add @tealmac-pro/api-key-field

Prop	Type	Default	Description
`value`	`string`	-	The secret. Rendered in full only while revealed.
`label`	`ReactNode`	`API key`	Visible label and accessible name of the group.
`description`	`ReactNode`	-	Helper text under the field.
`visiblePrefix`	`number`	`8`	Leading characters left visible while masked.
`visibleSuffix`	`number`	`4`	Trailing characters left visible while masked.
`revealed`	`boolean`	-	Controlled reveal state.
`defaultRevealed`	`boolean`	`false`	Initial reveal state when uncontrolled.
`onRevealedChange`	`(revealed: boolean) => void`	-	Called when the reveal toggle is pressed.
`onCopy`	`() => void`	-	Called after the key was copied.
`onRegenerate`	`() => void`	-	Shows a regenerate button. Confirming is up to you.
`regenerating`	`boolean`	`false`	Disables the regenerate button and spins its icon.

Also accepts all <div> props except children.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/api-key-field

Prop	Type	Default	Description
`value`	`string`	-	The secret. Rendered in full only while revealed.
`label`	`ReactNode`	`API key`	Visible label and accessible name of the group.
`description`	`ReactNode`	-	Helper text under the field.
`visiblePrefix`	`number`	`8`	Leading characters left visible while masked.
`visibleSuffix`	`number`	`4`	Trailing characters left visible while masked.
`revealed`	`boolean`	-	Controlled reveal state.
`defaultRevealed`	`boolean`	`false`	Initial reveal state when uncontrolled.
`onRevealedChange`	`(revealed: boolean) => void`	-	Called when the reveal toggle is pressed.
`onCopy`	`() => void`	-	Called after the key was copied.
`onRegenerate`	`() => void`	-	Shows a regenerate button. Confirming is up to you.
`regenerating`	`boolean`	`false`	Disables the regenerate button and spins its icon.

Also accepts all <div> props except children.