Data display

Secret field

A masked secret with reveal, copy and room for rotate or revoke.

import { SecretField } from '@jsonresume/ui'Source(opens in a new tab)

Examples

API key

CI deploy key

Hidden, ends in 1e8b

secret-field/api-key.tsx

'use client';

import { Button, SecretField, Stack, Text } from '@jsonresume/ui';

export default function SecretFieldApiKey() {
  return (
    <Stack gap={2}>
      <Text weight="semibold">CI deploy key</Text>
      <SecretField
        label="API key for CI deploy"
        value="jr_live_5f2c9a7e1b4d8c3a6e0f9b2d4a7c1e8b"
        actions={
          <Button variant="danger" size="sm">
            Revoke
          </Button>
        }
      />
    </Stack>
  );
}

Accessibility

Masked values are announced as "Hidden, ends in 1234"; Reveal is a toggle button.

Props

Also accepts the attributes of the element SecretField renders.
Prop	Type	Default	Description
label required	string	–	Names the secret for screen readers, e.g. "API key for CI".
value required	string	–	The full secret. Only shown when revealed.
actions	ReactNode	–	Extra actions: Rotate, Revoke.
visibleChars	number	4	Characters to keep visible at the end while masked.