SecretField

Usage examples

import { useState } from 'react';
import { Field, FieldDescription, FieldLabel, SecretField } from '@rookcom/monarch-react';

const narrow = { width: '100%', maxWidth: '28rem' } as const;

function SavedToken() {
  const [value, setValue] = useState('');
  return (
    <Field style={narrow}>
      <FieldLabel>API token</FieldLabel>
      <SecretField
        label="API token"
        isSet
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <FieldDescription>
        {value ? 'The new token replaces the saved one when you save.' : 'Stored encrypted.'}
      </FieldDescription>
    </Field>
  );
}

<SavedToken />

import { SecretField } from '@rookcom/monarch-react';

const narrow = { width: '100%', maxWidth: '28rem' } as const;

<div style={{ ...narrow, display: 'grid', gap: 'var(--mn-space-3)' }}>
  <SecretField label="Bot token" size="sm" defaultValue="bot-4f1a9c" />
  <SecretField label="Access key" size="lg" defaultValue="AKIA4EXAMPLE7Q" copyable />
</div>

Purpose

Enters or shows a secret (API key, bot token, signing secret) masked by default, with a toggle to reveal it and an optional copy button. The "set, not shown" state covers secrets the server stores but never sends back.

Design principles

• Masked until the user asks. Revealing is a deliberate, reversible toggle.
• Copy never needs reveal: the copy button copies the value while it stays masked.
• Honest about saved secrets: an isSet field is empty, says a value is saved, and offers nothing to reveal or copy, because the browser does not have it.
• Kept out of password managers and autocorrect, so a token is never saved as a login or "corrected".

API reference

import { SecretField } from '@rookcom/monarch-react';

Forwards its ref to the <input>. All Input props pass through except type, which the reveal state controls.

Works inside a Field: the FieldLabel names the input, and Field descriptions and errors merge with the isSet description.

Generated from the TypeScript declarations of packages/react/src/components/technical/secret-field.

Properties

value/onChange (controlled) or defaultValue (uncontrolled); copy uses the current text in both modes.

revealed/onRevealedChange (controlled) or defaultRevealed (uncontrolled).

Variants

States

Interaction behaviour

• The eye button toggles between masked and plain text.
• The copy button copies the current value (typed or given) and confirms like CopyButton.
• With isSet, leaving the field blank keeps the saved secret: the product sends nothing. Typing a value replaces it.

Keyboard support

Accessibility

Role

textbox (password), toggle button, button

Accessible name

Outside a Field, label is the input’s aria-label; inside one, the FieldLabel. The toggle is "Show {label}" with aria-pressed, the copy button "Copy {label}".

• The toggle keeps one name and reports its state with aria-pressed, as the WAI-ARIA toggle-button pattern requires.
• The isSet state is in aria-describedby, not only the placeholder.
• The copy result is announced by CopyButton’s live region.
• Inner buttons are at least 28px, above the WCAG 2.2 target-size minimum.

Responsive behaviour

• Full width of its container; the buttons sit inside the input’s end edge and the text is padded to clear them.
• Logical properties throughout, so the buttons move to the left in right-to-left layouts.

Theme support

• Built from Input and IconButton, so every theme and more-contrast mode applies.
• The value uses --mn-font-mono; the placeholder stays in the sans font.

Do and don't

Related components

• CopyField: For values that are not secret.
• CopyButton: The copy button it uses.
• Input: The Input it renders.
• Field: Label, help and errors.
• Alert: For a prominent "copy it now" warning around a one-time secret.

Dependencies

Testing coverage

• Masked by default; the toggle reveals and hides with a stable name and aria-pressed.
• Toggles from the keyboard.
• Controlled reveal and controlled value.
• Copies the current value without revealing it, in controlled and uncontrolled modes.
• "Set, not shown": empty, described, reveal and copy disabled until a new value is typed.
• Turns off autocomplete, spell-check and autocapitalise, and marks the input for password managers to ignore.
• Inside a Field: FieldLabel names it, descriptions merge, invalid applies.
• Forwards the ref to the input; revealable={false} hides the toggle.

Tests: packages/react/src/components/technical/secret-field