ReadOnlyTextField

ReadOnlyTextField renders a plain text value as non-editable output. It is intended for detail and view screens where a field's content should be presented consistently without allowing user input.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | The text value to display. | | label | string | No | — | Label shown above the value. | | description | string | No | — | Helper text shown below the value in italic. | | placeholder | string | No | — | Accepted but not rendered (reserved for API consistency). | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper div. | | valueStyle | React.CSSProperties | No | — | Style overrides for the value 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 ReadOnlyTextField from '@/components/read-only-fields/ReadOnlyTextField';

<ReadOnlyTextField
  label="Full Name"
  value="Jane Doe"
/>

With description

<ReadOnlyTextField
  label="Email"
  value="jane@example.com"
  description="Contact email registered on the account."
/>

Custom styles

<ReadOnlyTextField
  label="Status"
  value="Active"
  valueStyle={{ fontWeight: 700, color: '#2e7d32' }}
/>