ReadOnlyPasswordField

ReadOnlyPasswordField renders a password or sensitive value as non-editable masked output (typically shown as dots or asterisks). It is used in detail and view screens to indicate that a password field is set, without revealing the actual value.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | The password value. The display is masked regardless of content. | | label | string | No | — | Label shown above the field. | | description | string | No | — | Helper text shown below the field in italic. | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper div. | | valueStyle | React.CSSProperties | No | — | Style overrides for the masked display box. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

import ReadOnlyPasswordField from '@/components/read-only-fields/ReadOnlyPasswordField';

<ReadOnlyPasswordField
  label="Password"
  value="secret123"
/>

With description

<ReadOnlyPasswordField
  label="API Key"
  value={user.apiKey}
  description="Your API key. Keep it confidential."
/>