ReadOnlyLongTextField

ReadOnlyLongTextField renders a multi-line text value as non-editable output. It preserves whitespace and line breaks using white-space: pre-wrap, making it suitable for displaying descriptions, notes, or any long-form content in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | The multi-line text to display. Shows "Sin contenido" when empty. | | 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). | | rows | number | No | 3 | Controls the minimum height of the display area (each row equals ~20px). | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper div. | | valueStyle | React.CSSProperties | No | — | Style overrides for the text 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 ReadOnlyLongTextField from '@/components/read-only-fields/ReadOnlyLongTextField';

<ReadOnlyLongTextField
  label="Notes"
  value="This is a multi-line note.\nIt preserves line breaks."
/>

With custom height

<ReadOnlyLongTextField
  label="Description"
  value={product.description}
  rows={6}
  description="Full product description as entered."
/>