SensitiveInput

A secure input that masks its value by default and reveals on explicit user action. Supports copy-without-reveal and keyboard-driven state transitions.

Import

tsx

import { SensitiveInput } from '@tac-ui/web';

Playground

Interactively configure the SensitiveInput props below.

Disabled

Placeholder

tsx

<SensitiveInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Enter a secret value"
/>

Default (Pre-filled Value)

When a value is provided, the component starts in the masked state showing bullet characters. Click or press Enter/Space to reveal the actual value.

tsx

const [value, setValue] = useState('sk-proj-aBcDeFgHiJkLmNoPqRsTuVwXyZ');

<SensitiveInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Empty State

When no value is provided, the input renders as a standard text field. Once a value is entered and the component is remounted, it starts in the masked state.

tsx

const [value, setValue] = useState('');

<SensitiveInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Type a secret here..."
/>

Disabled

A disabled SensitiveInput is non-interactive with reduced opacity.

tsx

<SensitiveInput value="disabled-secret-value" disabled />

With Label

Compose with the Label component by passing a matching id and htmlFor for accessible labelling.

API Key

tsx

<div className="flex flex-col gap-1.5 w-full">
  <Label htmlFor="api-key-input">API Key</Label>
  <SensitiveInput
    id="api-key-input"
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
</div>

Keyboard Navigation

SensitiveInput is fully keyboard accessible with the following shortcuts:

tsx

// Masked state:
// Enter or Space → reveals the value
// Tab → moves focus normally

// Revealed state:
// Escape → re-masks the value

// Hover on mask → shows copy button

API Reference

Prop	Type	Default	Description
value	string	-	Controlled value. When non-empty, the component starts in the masked state.
defaultValue	string	-	Uncontrolled default value.
placeholder	string	-	Placeholder text shown in the empty state.
onCopy	() => void	-	Called after the value is copied to clipboard from the masked state.
onReveal	() => void	-	Called when the input transitions from masked to revealed.
onChange	ChangeEventHandler<HTMLInputElement>	-	Standard input change handler.
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	Keyboard handler. Escape is intercepted to re-mask; others are forwarded.
disabled	boolean	false	Disables the input.
id	string	-	HTML id for the input. Auto-generated if not provided.
className	string	-	Additional CSS class names.