ReadOnlyTimeField

ReadOnlyTimeField renders a time value as non-editable formatted output. It displays hours and minutes in a human-readable format, making it suitable for showing opening hours, schedules, or any time-of-day attribute in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | No | — | Time string in HH:MM or HH:MM:SS format. 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 ReadOnlyTimeField from '@/components/read-only-fields/ReadOnlyTimeField';

<ReadOnlyTimeField
  label="Opening Time"
  value="09:00"
/>

Without a value

<ReadOnlyTimeField
  label="Closing Time"
  value={undefined}
/>
// Renders: -

With description

<ReadOnlyTimeField
  label="Shift Start"
  value={shift.startTime}
  description="The time this shift begins."
/>