ReadOnlyMonthYearField

ReadOnlyMonthYearField renders a month-and-year value as non-editable output. It formats the value for human readability, showing only the month and year without a specific day. Used in detail and view screens for billing periods, expiry dates, or any month-level date attribute.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | No | — | Month-year string (e.g. "2024-06" or "06/2024"). Displays "-" when absent. | | 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. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

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

<ReadOnlyMonthYearField
  label="Billing Period"
  value="2024-06"
/>

With description

<ReadOnlyMonthYearField
  label="Card Expiry"
  value={card.expiryMonthYear}
  description="The month and year the card expires."
/>