ReadOnlyNumberField

ReadOnlyNumberField renders a numeric value as non-editable output. It supports optional prepend and append strings to add units, currency symbols, or any decorators around the number. Used in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | number | Yes | — | The numeric value to display. Displays 0 when falsy. | | 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). | | prepend | string | No | — | Text rendered before the number (e.g. "$", "USD"). | | append | string | No | — | Text rendered after the number (e.g. "kg", "%"). | | 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. | | prependStyle | React.CSSProperties | No | — | Style overrides for the prepend element. | | appendStyle | React.CSSProperties | No | — | Style overrides for the append element. |

Usage

Basic

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

<ReadOnlyNumberField
  label="Quantity"
  value={42}
/>

With currency prefix

<ReadOnlyNumberField
  label="Total Price"
  value={1500}
  prepend="$"
/>

With unit suffix

<ReadOnlyNumberField
  label="Weight"
  value={75}
  append="kg"
  description="Net weight of the shipment."
/>